Question

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

对齐应该是这样的

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

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

小提琴：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

图像和标签未对齐正确

3 个答案: