Question

如何对齐input元素，或忽略input元素位置是根据它们之前的p元素长度设置的事实？

＆＃13;

.netconf>input {
  margin-left: 6em;
  display: inline;
}

＆＃13;

<div id="ip" class="netconf">
  <p>IP Address</p>
  <input type="text" name="ipaddress" placeholder="XXX.XXX.XXX" />
</div>
<div id="netmask" class="netconf">
  <p>Netmask</p>
  <input type="text" name="netmask" placeholder="XXX.XXX.XXX" />
</div>
<div id="gateway" class="netconf">
  <p>Gateway</p>
  <input type="text" name="gateway" placeholder="XXX.XXX.XXX">
</div>
<div id="hostname" class="netconf">
  <p>Hostname</p>
  <input type="text" name="hostname" placeholder="Whatever" />
</div>

＆＃13;

Answer 1

正如您可能已经知道的那样，输入会像这样偏移，因为 IP地址是比 Netmask 更长的文本，但两者都具有相同的右边距。

您可以为输入标签提供固定或相对宽度，而不是右边距。

.netconf label {
  display: inline-block;
  min-width: 100px; /* <= maybe use a % */
}

<div class="netconf">

  <div id="ip">
    <label for="net-ip">IP Address</label>
    <input id="net-ip" type="text" name="ipaddress" placeholder="XXX.XXX.XXX">
  </div>
  
  <div id="netmask">
    <label for="net-mask">Netmask</label>
    <input id="net-mask" type="text" name="netmask" placeholder="XXX.XXX.XXX">
  </div>
  
  <div id="gateway">
    <label for="net-gateway">Gateway</label>
    <input id="net-gateway" type="text" name="gateway" placeholder="XXX.XXX.XXX">
  </div>
  
  <div id="hostname">
    <label for="net-host">Hostname</label>
    <input id="net-host" type="text" name="hostname" placeholder="Whatever">
  </div>
  
</div>

*注意：切换<p> <label>，感觉更适合表单。也可以简化HTML。

您还可以尝试将所有输入标签放在他们自己的元素（列）中，将所有输入放在另一个中。这种方法的缺点是尝试水平对齐标签和输入通常需要更多的HTML / CSS。

Answer 2

您可以将form和float的常规HTML结构用作css。

我认为

额外div和p不是必需的：）

label {
  float: left;
  width: 8em;/* whatever value and unit you want to use.*/
  clear: left;
  border-right: solid red; /* for demo tosee the red line from screenshot*/
  padding-bottom: 0.5em;
}

input {
  float: left;
}
/* extra in case you also want to center that form*/
form {
  display:table;
  margin:auto;
}

<form action>
  <label for="ipaddress">IP Address</label>
  <input type="text" name="ipaddress" id="ipaddress" placeholder="XXX.XXX.XXX" />
  <label for="netmask">Netmask</label>
  <input type="text" name="netmask" id="netmask" placeholder="XXX.XXX.XXX" />
  <label for="gateway">Gateway</label>
  <input type="text" name="gateway" id="gateway" placeholder="XXX.XXX.XXX">
  <label for="hostname">Hostname</label>
  <input type="text" name="hostname" id="hostname" placeholder="Whatever" />
</form>

Answer 3

这会奏效。将您的包装类设置为阻止，然后为您的<p>标记指定最小宽度。所有文本框都将在它们之后正确间隔开。您可以将最小宽度设置为您想要使它们适合的任何值，如果您担心它们变得太长，也可以设置最大宽度。

＆＃13;

.netconf {
  display: block;
}    

p {
  display: inline-block;
  min-width: 50%;
}

＆＃13;

<div id="ip" class="netconf">
   <p>IP Address</p>
   <input type="text" name="ipaddress" placeholder="XXX.XXX.XXX" />
</div>
<div id="netmask" class="netconf">
<br>
  <p>Netmask</p>
  <input type="text" name="netmask" placeholder="XXX.XXX.XXX" />
</div>
<div id="gateway" class="netconf">
<br>
  <p>Gateway</p>
  <input type="text" name="gateway" placeholder="XXX.XXX.XXX">
</div>
<div id="hostname" class="netconf">
<br>
  <p>Hostname</p>
  <input type="text" name="hostname" placeholder="Whatever" />
</div>

＆＃13;

Answer 4

尝试给左p元素赋一个固定长度，这样输入元素总是与p元素相等

Answer 5

您可以使用以下样式来实现它：

p, input {
        display: inline-block;
        width: 125px;
}

小提琴：https://fiddle.jshell.net/g94rkx91/1/

在HTML文档上对齐输入元素

5 个答案: