css - 尝试 float 输入并跨越内联

Question

我正在尝试将一些输入彼此相邻 float ，并在它们之间添加点以模拟 IPv4 地址；但是，跨度漂浮在中间。我怎样才能解决这个问题？此图片中的所有元素都应用了 float:left。

http://tinypic.com/r/33magcz/6

Answer 1

输入和跨度是内联元素，根本不需要 float 它们。

<input type="text" size="3" name="ip0" class"ipAddress">
<span class"ipAddress">.</span>
<input type="text" size="3" name="ip1" class"ipAddress">
<span class"ipAddress">.</span>
<input type="text" size="3" name="ip2" class"ipAddress">
<span class"ipAddress">.</span>
<input type="text" size="3" name="ip3" class"ipAddress">
<span class"ipAddress">.</span>

使用 CSS position: relative; 和 top: 垂直对齐元素。

---

从用户的 Angular 来看，我发现四个单独的 IP 地址输入框相当不友好。打字更难，复制/粘贴不起作用，这是一个很大的缺点。

从应用程序的 Angular 来看，单独的输入框没有太多好处。

我会说，放弃这个想法并提供一个输入字段。