1

我在对齐一些文本和溢出问题时遇到了很多麻烦。我最初将列表项浮动到左侧，但这给我带来了文本垂直对齐的问题。所以我切换到显示为内联块。我现在遇到的问题是我根本无法让我的第二个标签与第一个标签对齐（有点像第二列）。我意识到这可能是因为我将其设置为内联块，但我本质上是在寻找两件事；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/

4

2 回答 2

0

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

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

将标签换成普通的旧列表项，这就是我想出的[编辑：摆脱了一些笨拙的 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;
}

这是在正确的轨道上吗？

于 2013-03-13T17:06:41.397 回答
0

不完全确定你的目标是什么，但在黑暗中猛烈抨击（我可能会如何布局）

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

NB 关键是要让所有元素都向左浮动，而不仅仅是一个，还要明确指定一个宽度，它们可以并排放置而不是堆叠。

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

于 2013-03-13T16:55:12.287 回答