1

一部のテキストとオーバーフローの問題を揃えるのに苦労しています。私はもともとリスト項目を左に浮かせていましたが、テキストの垂直方向の配置に問題がありました。そこで、インラインブロック表示に切り替えました。私が今抱えている問題は、2 番目のラベルを最初のラベルと並べて (2 番目の列のように) 取得できないことです。おそらくインラインブロックとして設定しているためだと思いますが、基本的に2つのことを探しています。1) 2 番目のラベルを最初のラベルのすぐ隣に配置し、オーバーフローしないようにしたい。2) 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;
}

注: ポイントは、1 つだけでなく、すべての要素を左にフロートさせ、幅を明示的に指定することです。これらの要素は、積み重ねるのではなく、横に並べて収まるようにします。

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

于 2013-03-13T16:55:12.287 に答える