完善HTML中INPUT的对齐

最新推荐文章于 2024-04-24 09:27:42 发布

wu_now

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量5.9k

点赞数 1

分类专栏： css html input对齐文章标签： input html class float table 框架

html 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

input对齐

2 篇文章 0 订阅

订阅专栏

打算用HTML语言，来放几个input及其他单选框，复选框之类的文本框。
通过对input的理解，我自己先写了个简单的代码，但是显示出来有点乱，呈现的效果没有那么好，下面是我自己写的代码：

IP Address:<input type=”text” name=”ip_add” value=”192.168.6.1″><br/>
Subnet Mask:<input type=”text” name=”mask” value=”255.255.255.0″><br/>
GetWay:<input type=”text” name=”getway” value=”192.168.6.102″><br/>
NDS:<input type=”text” name=”nds” value=”202.96.128.86″><br/>
MAC Address:<input type=”text” name=”mac_add” value=”FF:FF:FF:FF:FF:FF”><br/>

原本是想input文本框前的名字左对齐的，后面所有文本框垂直对齐，但结果如下：

完全不是自己想要的结果，怎样才能让它更完善呢？想起之前看过的ul是无序列表，那应该可以正确排列的，不过同时也需要用到css，马上改写下代码：

<head>
<style type=”text/css>
ul.none{list-style-type:none}
</style>
</head>

<body>
<ul class=”none”>
<li>IP Address:</li><input type=”text” name=”ip_add” value=”192.168.6.1″>
<li>Subnet Mask:</li><input type=”text” name=”mask” value=”255.255.255.0″>
<li>GetWay:</li><input type=”text” name=”getway” value=”192.168.6.102″>
<li>NDS:</li><input type=”text” name=”nds” value=”202.96.128.86″>
<li>MAC Address:</li><input type=”text” name=”mac_add” value=”FF:FF:FF:FF:FF:FF”>
</ul>
</body>

显示的结果如下: