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