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。

我也尝试了浮动和位置方法，但没有找到适合任何标签或输入大小的通用解决方案。我可能会考虑为此使用 jQuery，但我更喜欢仅使用 CSS 的更简单的方法。

已经快两天试图找到一个好的解决方案......

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 回答