Question

想象一下以下说明性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所以我倾向于相信使用内容isn'除非有条件地（.lbt::after或.obr::after存在），否则是可行的。这是jsfiddle出现此问题。

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

差不多两天试图找到一个好的解决方案......

Answer 1

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;

最后一个跨度换行但不能更改HTML

1 个答案: