Make span and input equally sized

Question

In the following snippet I want <span>1</span> to have the same width, as <input type="text" size="1" value="1" /> Same for second span and second input. And so on.

<!DOCTYPE HTML>
<body>
<div>
    <span>1</span>    
    <span>2</span>    
    <span>3</span>    
</div>
<div>
    <input type="text" size="1" value="1" />
    <input type="text" size="1" value="2" />
    <input type="text" size="1" value="3" />
</div>
</body>
</html>

How can I accomplish this with css?

UPD: Sorry, I did not make it clear, that it must be 2 rows. Row of spans and row of inputs

Give your elements width and make them display as blocks? What have you tried? — Ruan Mendes, Nov 06 '13 at 18:10

score 3 · Accepted Answer · edited May 23 '17 at 11:56

I assume that you want to retain the span elements inline behavior, but inline¹ elements don't take width, so assign display: inline-block; to your span elements

div span {
    display: inline-block;
    width: 25px;
    text-align: center;
    border: 1px solid #f00;
}

div input[type=text] {
    width: 25px;
}

Demo

^{1. Inline Elements}

Note: As you might be aware, inline-block retains white space between the elements, to get rid of that, either call font-size: 0; on the parent element, or consider floating your elements to the left, and you don't have to use size attribute anymore, consider assigning width to the elements using CSS instead.

Also make sure you normalize your CSS for cross browser consistency.

You'll also need to account for the border of the span, which is counted as part of the input. You can either add 2 pixels to the input width (or subtract from the span width), or a cleaner solution might be to add `box-sizing: border-box;` to your elements. — fijiaaron, Jun 22 '22 at 14:27

score 1 · Answer 2 · answered Nov 06 '13 at 18:13

Remove the size of one on the inputs and add a class. (Just in case you dont know, 1 em = the current font-size)

<!DOCTYPE HTML>
<style>
    .one {
        width: 1em;
    }
    .two {
        width: 1em;
    }
    .three {
        width: 1em;
    }
</style>
<body>
<div>
    <span class="one">1</span>    
    <span class="two">2</span>    
    <span class="three">3</span>    
</div>
<div>
    <input type="text" class="one" value="1" />
    <input type="text" class="two" value="2" />
    <input type="text" class="three" value="3" />
</div>
</body>
</html>

score 0 · Answer 3 · answered Nov 06 '13 at 18:08

JsFiddled here :

span, input {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:222px;
    height: 33px;
    padding:0;
    margin:0;
    display:block;
    float:left
}

BUT, by forcing the input in a border-box layout, you will have to deal with some other situations....

Somehow, i feel ashamed trying to help you without seeing first what you have tried.

score 0 · Answer 4 · answered Nov 06 '13 at 18:17

Well if you want to remain your span's, you could use something like this:

#wrapper
{
    height: auto;
    width: 500px;
}

span, input
{
    width: 30%;
    display: inline-block;
}

jsFiddle

However, your layout is so close to a table layout. So why not use the <table> element:

<table>
    <tr>
        <td>
            <label>1</label>
        </td>
        <td>
            <label>2</label>
        </td>
        <td>
            <label>3</label>
        </td>
    </tr>
    <tr>
        <td>
           <input type="text" size="1" value="1" /> 
        </td>
         <td>
           <input type="text" size="1" value="2" /> 
        </td>
         <td>
           <input type="text" size="1" value="3" /> 
        </td>        
    </tr>       
</table>

jsFiddle

Make span and input equally sized

4 Answers4