Making text elements in HTML take up a fixed amount of space without using tables?

Question

I have a web page that has five buttons of width 50 arranged next to each other in a row, and above each one, I want there to be a text item. However, putting each one in a <span> or a <div style="display:inline"> does not pad them correctly with either "width="50"" or adding "width:50px" to the style; they just appear next to each other. The "obvious" answer is to put each item into a table cell, but W3C says this is a Bad Thing now.

I also tried using input tags with readonly set; these space properly, but the text appears in input boxes rather than "on the page background."

Is there a way to align label elements (that can be changed in the script) evenly spaced horizontally without using a table?

Possible duplicate of [Setting the width of inline elements](http://stackoverflow.com/questions/1423294/setting-the-width-of-inline-elements) — Michał Perłakowski, Jan 19 '16 at 19:40

score 2 · Answer 1 · answered Jan 19 '16 at 20:03

There are a few possible solutions. Either you can use display: table-cell, which perfectly follows the W3C recommendations or you can use a flex box which is an even better solution. However the flex box is still quite new and you may want to support an older browser so the display: table-cell approach might work at least as a fallback.

Please, see the working fiddle.

HTML

<div class="container">
    <div class="row">
        <span>Text 1</span>
        <span>Text 2</span>
        <span>Text 3</span>
        <span>Text 4</span>
    </div>
</div>

CSS

.container {
  display: table;
  width: 100%;
}

.row {
  display: table-row
}

span {
  display: table-cell;
  text-align: center;
}

score 1 · Answer 2 · answered Jan 19 '16 at 19:39

1

Elements of display: inline don't take a width property, their size is dictated by their contents; to allow for elements to appear in-line with their siblings and to also accept a width switch their display property to that of inline-block.

answered Jan 19 '16 at 19:39

David Thomas

249,100
51
377
410

score 1 · Accepted Answer · answered Jan 19 '16 at 19:39

1

Inline elements can't have fixed width or height. Try adding display: inline-block;.

answered Jan 19 '16 at 19:39

Michał Perłakowski

88,409
26
156
177

score 1 · Answer 4 · answered Jan 19 '16 at 19:39

1

It's because inline elements does not have fixed width. They are automatically set to fit in the space. You need to set display: inline-block to set width of an inline element.

answered Jan 19 '16 at 19:39

Zefiryn

2,240
2
20
30

score 0 · Answer 5 · answered Jan 19 '16 at 20:28

Try this:

<style>
.btnbtnSpace{
 width:50px; 
 display: inline-block;
 }    
</style>


<div class="btnbtnSpace">Text<br /><button > 1</button></div>
<div class="btnbtnSpace">Text<br /><button > 2</button></div>
<div class="btnbtnSpace">Text<br /><button > 2</button></div>
<div class="btnbtnSpace">Text<br /><button > 4</button></div>
<div class="btnbtnSpace">Text<br /><button > 5</button></div>

score 0 · Answer 6 · answered Jan 20 '16 at 14:11

0

"display: inline-block" worked. I didn't notice it at first because the options on the "CSS Display" page at W3Schools didn't include it; inline-block gets its own page for some reason.

answered Jan 20 '16 at 14:11

Don Del Grande

411
6
20

Making text elements in HTML take up a fixed amount of space without using tables?

6 Answers6