Home/ Questions/Q 8676205
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T20:08:09+00:00

I’m trying to float a few inputs next to each other with dots between

  • 0

I’m trying to float a few inputs next to each other with dots between them to simulate an IPv4 address; however, the span is floating in the middle. How can I fix this? All of the elements in this picture have float:left applied.

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Inputs and spans are inline elements, you don’t need to float them at all.

    <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>

    Use CSS position: relative; and top: to align elements vertically.

    From a user’s perspective I find four separate input boxes for an IP-address rather unfriendly. It’s harder to type and copy/paste does not work, which is a big drawback.

    From the application’s perspective there is not much to gain from separate input boxes.

    I’d say, dump the idea and provide a single input field.

    • 0