Question

如何将2个标签与底部对齐对齐。如果一个标签有多行，则它旁边的标签将显示在顶部。我能把它对齐到底部吗？

<div class="field">
  <div class="label">labl 1:</div>
  <div class="value">Some text</div>
  <br />
  <br />
</div>

<div class="field">
  <div class="label">this is a really really long label:</div>
  <div class="value">right after":" from previous label</div>
  <br />
</div>

.label {
    background: purple;
    float: left;      
    width: 100px;
    display: inline;
    vertical-align: 500px;

}

.value {
    background: red;
    width: 300px;
    float: right;

}

非常感谢：）

Answer 1

以下是一些选项：

使用display:inline-block：

.label {
    background: purple;
    width: 100px;
    display: inline-block;
}
.value {
    background: red;
    width: 300px;
    display: inline-block;
    vertical-align: bottom;
}

<强> Demo fiddle

使用display:table和table-cell

.field {
    display: table;
}
.label,.value{
    display: table-cell;
}
.label {
    background: purple;
    min-width: 100px;
}
.value {
    background: red;
    width: 100%;
    vertical-align: bottom;
}

<强> Demo fiddle

使用position:absolute

.field {
    position: relative;
}   
.label {
    background: purple;
    width: 100px;
}
.value {
    background: red;
    width: 300px;
    position: absolute;
    right: 0;
    bottom: 0;
}

<强> Demo fiddle

注意：前两个选项在IE中不起作用＆lt; 8（没有一些黑客）

Answer 2

在此示例中使用此示例css多行标签已分配

label {
    display: block;
    margin-left: 20px;
}
input {
    float: left;
    margin-left: -20px;
    margin-right: 7px;
}

Answer 3

jsfiddle

<强> CSS

.label {
        background: purple;
        float: left;      
        width: 100px;
        display: inline;
        vertical-align: 500px;

}

.value {
        background: red;
        width: 300px;
        float: right;
}
#bor
{
    line-height:40px;
}

<强> HTML

<fieldset>
    <div class="field">
        <div class="label">labl 1:</div>
        <div class="value">Some text</div>
        <br />
        <br />
    </div>

    <div class="field">
        <div class="label">this is a really really long label:</div>
        <div id="bor" class="value">right after":" from previous label</div>
        <br />
    </div>
</fieldset>

enter image description here

CSS多行标签对齐

3 个答案: