尝试浮动输入并跨越内联

Question

我试图将几个输入彼此相邻，并在它们之间用点来模拟IPv4地址;然而，跨度漂浮在中间。我怎样才能解决这个问题？此图片中的所有元素都有浮动：左侧应用。

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

Answer 1

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

<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:垂直对齐元素。

---

从用户的角度来看，我发现IP地址的四个独立输入框相当不友好。键入和复制/粘贴更难以工作，这是一个很大的缺点。

从应用程序的角度来看，从单独的输入框中获得的收益并不多。

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