图像和标签未正确对齐答案

【问题标题】：Image and label not aligning correct图像和标签未正确对齐
【发布时间】：2015-10-21 10:45:51
【问题描述】：

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

对齐应该是这样的

<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();
    });
});

【问题讨论】：

现在检查一下很容易jsfiddle.net/rohitmalikazad/74k8kptc/7
jsbin.com/tinuyavafe/edit?html,css,output - 一种 css 方式

标签： jquery html css alignment label

【解决方案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/

【讨论】：

谢谢，就是这个

【解决方案2】：

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

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

小提琴：http://jsfiddle.net/74k8kptc/4/

【讨论】：

对不起，也许我没有很好地解释，但我希望标签的文本从图像旁边开始，如果标签的任何文本溢出到下一行，我想要那个文本从与第一行文本相同的缩进位置开始。

【解决方案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

【讨论】：

也很好用，谢谢，需要看看哪种解决方案更适合我的扩展器