图像和标签未正确对齐

Question

我正在尝试对齐标签的文本，以便当文本因屏幕不足 space 而溢出到下一行时，它与第一行中的文本以相同的缩进开始。我创建了这个示例来演示我遇到的问题。

对齐应该是这样的

<body>
    <div class="Container">
        <div class="toggle_head">
            <img src="pfeil_rechts_blau.png" alt="Expand" class="expand">
            <img src="pfeil_links_blau.png" alt="Collapse" class="collapse">
            <label class="Question">Some long text that doesnt align properly when the page forces text on new line on making it smaller</label>
        </div>
        <div class="toggle_body">
            <hr>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
    </div>

.toggle_body {
    padding-left: 15px;
    font-size:12;
    display: none;
}
.Container {
    padding-bottom: 8px;
}
.Expand {
    height: 8px;
}
.Collapse {
    height: 8px;
}
.Question {
    font-weight: bold;
    padding-left: 5px;
}

$(".toggle_body").hide();
$(".collapse").hide();

$(".toggle_head").click(function () {
    var $this = $(this);    
    $this.next(".toggle_body").slideToggle(500, function () {
        $this.children('img').toggle();
    });
});

Answer 1

.toggle_body {
    padding-left: 15px;
    font-size:12;
    display: none;
}
.toggle_head {
        display: table;
}
.Container {
    padding-bottom: 8px;
}
.Expand {
    height: 8px;
}
.Collapse {
    height: 8px;
}
.Question {
    font-weight: bold;
    display: table-cell;
    padding-left: 5px;
    vertical-align: top;
}
img{
    vertical-align: top;
    display: table-cell;
}

http://jsfiddle.net/74k8kptc/5/

Answer 2

.Question {
    font-weight: bold;
    padding-left: 15px;
    display: inline-block;
}

我明白你想做什么吗？只需对齐问题和文本 ?

Fiddle : http://jsfiddle.net/74k8kptc/4/

Answer 3

试试这个

   .toggle_head {
    white-space: nowrap;
}
.toggle_head img {
   display:inline-block;
    vertical-align:top;
}
.Question{
    display:inline-block;
    vertical-align:top;
    white-space: normal;
}

Demo

图像和标签未正确对齐

Image and label not aligning correct

html

css

jquery

label

alignment