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アドレス用の4つの別々の入力ボックスはかなり不親切だと思います。入力が難しく、コピー/貼り付けが機能しないため、大きな欠点があります。

アプリケーションの観点からは、個別の入力ボックスから得られるものはあまりありません。

つまり、アイデアをダンプして、単一の入力フィールドを提供します。