Question

我想创建

的CSS

将Label的宽度设置为100px
将选择/输入元素置于标签右侧
在行中定位{label，element}部分

到目前为止，我的CSS失败了...我不知道该怎么做。总之，我想要这个：

Label:   [  ... ]
Label2:  [ ...  ]
Label3:  [...   ]

如何？

＆＃13;

span {
  width: 100px;
  display: block;
}

＆＃13;

<div><label>
    <span>Label:</span>
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</label>
  <label>
    <span>Label2:</span>
    <input name="motor" value="44" type="number">
</label></div>

＆＃13;

Answer 1

使用您拥有的HTML结构，您需要将span设置为inline-block，将label设置为block以将其设置为新行

将span设置为inline-block可以使其内联，但仍然保持其框样式（例如，宽度）。

＆＃13;

span {
  width: 100px;
  display: inline-block;
}

label {display:block}

＆＃13;

<div>
  <label>
    <span>Label:</span>
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
  </label>
  <label>
    <span>Label2:</span>
    <input name="motor" value="44" type="number">
  </label>
</div>

＆＃13;

Answer 2

将每个<script></script>放在单独的label元素中以解决您的问题。尝试给定的链接或以下代码

JSFiddle

HTML代码 -

div

CSS代码 -

<div>
    <label>
        <span>Label:</span>
        <select>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </label>
</div>
<div>
    <label>
        <span>Label2:</span>
        <input name="motor" value="44" type="number">
    </label>
</div>

如何将表单元素放在行中，同时使标签和元素彼此相邻？

2 个答案: