Question

我对这一切都不熟悉，所以我有一个问题，这可能很愚蠢，但无论如何我们都去了。

我有一个表单的HTML，但我需要使用CSS将我的标签对齐到文本框的左侧，不让它位于顶部。我不知道要使用什么CSS才能做到这一点。

<form action="process.php">
    <h1>Registration</h1>
    <ol>
        <li>
            <label for="name">Name:</label>
<input type>"text" id="name" name="name">
        </li>
    </ol>
</form>

还有三个＆＃34;标签＆＃34;我的ol就像这样，但我不想全部打字。

我需要左边的标签与我的文本框对齐。

我试过了：

label{display:inline-block}

和

label ol{display:inline-block}

我试过给花车，教科书（是的，这是为了大学课）说要做到这一点：

.label{
    display:inline-block;
}

但似乎也不起作用。请告诉我我到底怎么做。

到目前为止，这是我确切的CSS：

h1{font-family:Oregano;}

form{margin-bottom:1em;}

form ol{list-style-type:none;}

form li{width:100px;
border:1px solid black;
text-align:right;
background-color:black;
color:white;
margin:20px;
height:20px;
white-space:5px;}

它看起来应该是应该的，我只是对标签的对齐有问题。我有没有提到我有多讨厌这个废话？我正在改变我的专业！（不是真的......但仍然）

Answer 1

你正在寻找这样的东西吗？如果是这样，则不需要CSS。

<ol>
  <li>
    <label for="name">Name:</label>
    <input type="text" value="some text" />
  </li>
  <li>
    <label for="name">Name:</label>
    <input type="text" value="some text" />
  </li>
  <li>
    <label for="name">Name:</label>
    <input type="text" value="some text" />
  </li>
</ol>

<小时/>

因此，使用您更新的CSS是一个解决方案：

form {
  margin-bottom: 1em;
}
form ol {
  list-style-type: none;
}
form li {
  margin: 20px;
  height: 20px;
  white-space: 5px;
}
form label {
  width: 100px;
  border: 1px solid black;
  text-align: right;
  background-color: black;
  color: white;
}

<form>
  <ol>
    <li>
      <label for="name">Name:</label>
      <input type="text" value="some text" />
    </li>
    <li>
      <label for="name">Name:</label>
      <input type="text" value="some text" />
    </li>
    <li>
      <label for="name">Name:</label>
      <input type="text" value="some text" />
    </li>
  </ol>
</form>

Answer 2

label和input都必须inline / inline-block

label, input{
    display:inline-block;
}

当然，它们必须彼此相邻，并且在您的情况下左侧有标签。

顺便说一下：拥有labels＆amp; inputs元素内的li

Answer 3

如果你查看你的例子：

<form action="process.php">
<h1>Registration</h1>
<ol>
<li>
<label for="name">Name:</label>
<input type="text" id="name" />
    </li>
    </ol>
</form>

默认情况下，您会看到它的样子。

因此，某些CSS规则中的问题必须是为输入或标签标记（或两者）提供显示块

试试这个：

标签，输入{display：inline-block！important}

“！important”最后是为了防止您需要覆盖其他规则。

如何使用CSS将标签对齐到文本输入框的左侧？

3 个答案:

因此，使用您更新的CSS是一个解决方案：