对齐HTML文档上的输入元素

Question

我怎样才能对齐input元素，或者忽略这样的事实：input元素的位置是根据元素前面p元素的长度设置的？

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

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

Answer 1

尝试给出一个固定的长度，以留下p元素，从而使输入元素永远是相等遥远，从p elememts

Answer 2

正如你可能已经知道，输入是这样的偏移，因为IP地址是一个比更长的文本网络掩码但两者具有相同的右边距。

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

.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 3

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

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

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

Answer 4

你可以使用普通的HTML结构为form和float为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 5

这将工作。将封装类设置为封锁，然后给您的<p>标签分配最小宽度。所有的文本框将在它们之后正确地间隔开。您可以将最小宽度设置为任何您想使它们适合的尺寸，如果您担心它们变得太长，请设置最大宽度。

.netconf { 
 
    display: block; 
 
}  
 

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

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