2

次の例示的な HTML を想像してください。

<form>
<div class="line">
    <label class="lbt" for="name">Name:</label>
    <span class="obr">*</span>
    <input id="name" class="inp" type="text" />
    <span class="err">Missing!</span>
</div>
<div class="line">
    <label class="lbt" for="area">Area:</label>
    <input name="area" class="inp" type="text" />
    <span class="suf">m<span style="vertical-align: super;">2</span></span>
    <span class="err">Missing!</span>
</div>
</form>

クライアントの要件により、ラベルと必須インジケーターを含むスパンの両方が同じ行にある必要があります。入力と残りのスパンは次の行にあります。必須インジケータはラベル テキストの直後に配置し、他のスパンは入力要素の直後に配置する必要があります。

悲しいことに、HTML コードを変更することはできません。または、義務的な要素をラベル内に配置してdisplay: blockスタイルを使用します (または、両方をスパンでラップして同じことを行います)。

.obr::afterを使用して改行を作成しようとしましたが、この要素は常に存在するとは限らず::before、入力要素で使用できないため、条件付きで配置する方法がない限り (.lbt::afterまたは.obr::after存在する場合)。これは、この問題に関するjsfiddleです。

float と position のアプローチも試しましたが、ラベルや入力サイズに適合する一般的な解決策は見つかりませんでした。これには jQuery の使用を検討するかもしれませんが、CSS のみによるより単純なアプローチを好みます。

良い解決策を見つけるのにほぼ2日かかりました...

4

1 に答える 1

7

labelそして* <span>右隣同士。

<input />もう<span>一方は別の行に並んでいます。

    .line
    {
        border: 2px solid black;
        padding: 5px;
        overflow:hidden;
    }

    .line .obr
    {
        color: Red;
        font-weight: bold;
        float:left;
    }

    .lbt
    {
        float:left; 
     }
    .line .obr::after
    {
        content: '\A';
        white-space: pre;
    }
    .inp
    {
        float:left; clear:both;
        margin-top:5px;

    }
    .line span
    {
        float:left;
    }

これをチェックしてください：http://jsfiddle.net/AliBassam/2LqCc/

<span>横<input />を低くしたい場合は、追加しますmargin-top:5px;

于 2013-01-28T18:42:37.170 に答える