css - 尝试浮动输入和跨度内联

Question

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

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>

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

---

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

从应用程序的角度来看，单独的输入框并没有什么好处。

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