Question

我在调整一些文本和溢出问题时遇到了很多麻烦。我最初是将我的列表项浮动到左侧，但这给了我垂直对齐文本的问题。所以我切换到显示为内联块。我现在遇到的问题是，我根本无法将第二个标签与第一个标签对齐（有点像第二列）。我意识到这可能是因为我将它设置为内联块，但我基本上是在寻找两件事; 1）我希望第二个标签在第一个标签旁边对齐而不是溢出，2）确保第二个标签文本的垂直对齐位于底部。

HTML：

<fieldset>
<ol>
<li>
<label class="lbl">What market changes are you trying to capture?</label>
<label class="val">test 123 test 123test 3test 123 test 123test 3test 123 test 123test 3test 123 test 123test 3test 123 test 123test 3test 123 test 123test 3</label>
</li>
</ol>
</fieldset>

CSS：

body 
{
    background-color: #FCFCFC;
    font:11px verdana,arial,sans-serif;
}

fieldset 
{
    border:1px solid #ccc;
    margin:1em;
    padding:1em;  
    width: 75%;
    float: none;
    clear: both;
}

fieldset ol
{
    list-style:none;
}

fieldset li
{

    display:inline-block;    
    margin-bottom:1em;
    width:100%;
}

fieldset label.lbl
{   
    display:inline-block; 
    width:26%;
    margin-right:1em;
    text-align:justify;
    font-weight: bold;
    vertical-align:bottom;
}

fieldset label.val
{
    display:inline-block;
    vertical-align:middle;
    overflow: hidden;
}

小提琴： http://jsfiddle.net/CDsLr/2/

Answer 1

不完全确定你的目标是什么，但是在黑暗中采取疯狂刺激（我可能会如何解释）

label{
    float: left;
    width: 50%;
    text-align: justify;
}

的 N.B。重点是浮动所有元素，而不仅仅是一个，并明确指定宽度，它们可以并排放置而不是堆叠。

http://jsfiddle.net/CDsLr/3/

Answer 2

略有不同的观点：由于你没有使用输入，我将假设正在发生的是这是一个“确认”或其他类型的视觉反馈页面。用户提供了答案，现在您回复他们的答案。

如果这是一个错误的假设，可能（但不一定是！）有助于了解总体目标。

换掉普通旧列表项的标签，这就是我想出来的[编辑：摆脱一些狡猾的CSS]：

http://jsfiddle.net/CDsLr/6/

HTML：

<fieldset>
    <ol>
        <li class="lbl">What market changes are you trying to capture?</li>
        <li class="val">test 123 test 123test 3test 123 test 123test 3test 123 test 123test 3test
            123 test 123test 3test 123 test 123test 3test 123 test 123test 3</li>
    </ol>
</fieldset>

CSS：

body 
{
    background-color: #FCFCFC;
    font:11px verdana,arial,sans-serif;
}

fieldset 
{
    border:1px solid #ccc;
    margin:1em;
    padding:1em;  
    width: 75%;
}

fieldset ol
{
    list-style:none;
}

fieldset li
{
    display:inline-block;    
    margin-bottom:1em;
    width:50%;
    vertical-align:bottom;
}

fieldset .lbl
{   
    width:26%;
    margin-right:1em;
    font-weight: bold;
}

这是在正确的轨道上吗？

文本对齐和溢出

2 个答案:

http://jsfiddle.net/CDsLr/3/