CSS fixed width in a span

Question

Within an unordered list:

<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>

Adding a class or style attribute is permitted but padding the text and adding or changing tags is not allowed.

The page is rendering with Courier New.

Goal is to have text after span lined up.

    The lazy dog.
AND The lazy cat.
OR  The active goldfish.

Justification of the "OR" is unimportant.

The lazy animal text may be wrapped in an additional element but I'll have to double check.

score 601 · Answer 1 · answered Nov 02 '08 at 23:27

601

In an ideal world you'd achieve this simply using the following css

<style type="text/css">

span {
  display: inline-block;
  width: 50px;
}

</style>

This works on all browsers apart from FF2 and below.

Firefox 2 and lower don't support this value. You can use -moz-inline-box, but be aware that it's not the same as inline-block, and it may not work as you expect in some situations.

Quote taken from quirksmode

answered Nov 02 '08 at 23:27

codeinthehole

8,876
3
25
34

1

@NicholasPickering .. how about wkhtmltopdf? – codeinthehole May 02 '13 at 14:03
Hm, not sure. It's just a minor setback. Ended up having to use tables to get the desired effect. – Nick Pickering May 02 '13 at 14:10
Well, I can recommend wkhtmltopdf if you ever need something that is CSS3 compliant. – codeinthehole May 03 '13 at 14:39
7

Meanwhile, 10 years later, this is definitely the way to go. – vog Sep 28 '18 at 07:49

score 449 · Accepted Answer · edited Apr 20 '20 at 18:40

449

ul {
  list-style-type: none;
  padding-left: 0px;
}

ul li span {
  float: left;
  width: 40px;
}

<ul>
  <li><span></span> The lazy dog.</li>
  <li><span>AND</span> The lazy cat.</li>
  <li><span>OR</span> The active goldfish.</li>
</ul>

Like Eoin said, you need to put a non-breaking space into your "empty" spans, but you can't assign a width to an inline element, only padding/margin so you'll need to make it float so that you can give it a width.

For a jsfiddle example, see http://jsfiddle.net/laurensrietveld/JZ2Lg/

edited Apr 20 '20 at 18:40

johannchopin

13,720
10
55
101

answered Nov 02 '08 at 22:55

Stephen Caldwell

5,044
1
17
10

1

is an inline element by default - and floating it won't give it a width. – codeinthehole Nov 02 '08 at 23:14
56

The float property generates a "block box" which does have a width. – Stephen Caldwell Nov 02 '08 at 23:23
@touqen, the css you've provided doesn't give the span an equal width in ff3 or opera 9.51 – codeinthehole Nov 03 '08 at 00:00
@codeinthehole -- Really? It works just fine here (ff-3.0.3). – Stephen Caldwell Nov 03 '08 at 01:55
94

Should it be `diplay: inline-block; width: 32px;` will do in most modern browsers. – Paulo Bueno Jan 09 '12 at 18:18
@codeinthehole WebKit does give it a width (as long as you give the `width` property, of course). – Constantino Tsarouhas Mar 04 '12 at 14:25
2

@Randy Marsh - no, the width property only has an effect because the float property changes the element to a block display, as Stephen Caldwell describes above. – codeinthehole Mar 09 '12 at 18:44
15

@PauloBueno can you change `diplay` to read `display`, BTW, it works for me. thanks – basarat Aug 22 '13 at 03:10

Tamas Czinege · Answer 3 · 2008-11-02T23:09:36.487

Unfortunately inline elements (or elements having display:inline) ignore the width property. You should use floating divs instead:

<style type="text/css">
div.f1 { float: left; width: 20px; }
div.f2 { float: left; }
div.f3 { clear: both; }
</style>

<div class="f1"></div><div class="f2">The Lazy dog</div><div class="f3"></div>
<div class="f1">AND</div><div class="f2">The Lazy cat</div><div class="f3"></div>
<div class="f1">OR</div><div class="f2">The active goldfish</div><div class="f3"></div>

Now I see you need to use spans and lists, so we need to rewrite this a little bit:

<html><head>
<style type="text/css">
        span.f1 { display: block; float: left; clear: left; width: 60px; }
    li { list-style-type: none; }
    </style>

</head><body>
<ul>
<li><span class="f1">&nbsp;</span>The lazy dog.</li>
<li><span class="f1">AND</span> The lazy cat.</li>
<li><span class="f1">OR</span> The active goldfish.</li>
</ul>
</body>
</html>

That's a great solution. Floating divs mimic the intended behavior of spans as they line up horizontally. It's important to remember the clear:both line break. It's a great way to avoid tables in this context. — artur, Feb 11 '10 at 16:22
I don't understand, button is inline or inline-block element, why "width" will apply to it? Button seems like a inline element right? Is there any doc showing the default "display" properties of all html element? — Sam YC, Apr 25 '14 at 08:32

Aaron Powell · Answer 4 · 2015-02-09T02:52:55.110

15

The <span> tag will need to be set to display:block as it is an inline element and will ignore width.

so:

<style type="text/css"> span { width: 50px; display: block; } </style>

and then:

<li><span>&nbsp;</span>something</li>
<li><span>AND</span>something else</li>

edited Feb 09 '15 at 02:52

answered Nov 02 '08 at 23:01

Aaron Powell

24,927
18
98
150

No, I don't think this works. "something" goes to the next line. And there is a missing "<" – user1537366 Feb 08 '15 at 11:59
As I said, it does NOT work! Check http://jsfiddle.net/m156a0qp/ out. Also, it is never good to meddle with the CSS of all span elements! – user1537366 Feb 12 '15 at 11:03

score 12 · Answer 5 · answered May 01 '20 at 19:25

Using HTML 5.0, it is possible to fix width of text block using <span> or <div>.

For <span>, what is important is to add following CCS line

display: inline-block;

For your empty <span> what is important is to add   space.

My code is following

body
 {
 font-family: Arial;
 font-size:20px;
 }

div
 {
 width:200px;
 font-size:80px;
 background-color: lime;
 }
div span
 {
 display:block;
 width:200px;
 background-color: lime;
 }

ul li span
 {
 display: inline-block;
 width: 80px;
 background-color: yellow;
 }
span.tab
 {
 display: inline-block;
 width: 80px;
 background-color: yellow;
 }

&lt;DIV&gt;

<div class='test'>ABCDEF</div>

&lt;SPAN&gt;

<div>
    <span class='test'>ABCDEF</span>
</div

<br>

<ul>
  <li><span class='tab'>&nbsp;</span> The lazy dog.</li>
  <li><span class='tab'>AND</span> The lazy cat.</li>
  <li><span class='tab'>OR</span> The active goldfish.</li>
</ul>

PS: I have defined tab class because ul li span CSS selector is not working on my PC !

score 4 · Answer 6 · answered Sep 14 '13 at 21:05

4

<style type="text/css">

span {
  position:absolute;
  width: 50px;
}

</style>

You can do this method for assigning width for inline elements

answered Sep 14 '13 at 21:05

Augustus Francis

2,694
4
22
32

score 2 · Answer 7 · edited Aug 20 '21 at 10:40

People span in this case cant be a block element because rest of the text in between li elements will go down. Also using float is very bad idea because you will need to set width for whole li element and this width will need to be the same as width of whole ul element or other container.

Try something like this in HTML:

<li><span></span><strong>The</strong> lazy dog.</li>
<li><span>AND</span> <strong>The</strong> lazy cat.</li>
<li><span>OR</span>  <strong>The</strong> active goldfish.</li>

and in the CSS:

li {position:relative;padding-left:80px;} // 80px or something else
li span {position:absolute;top:0;left:0;}
li strong {color:red;} // red or else

So, when the li element is relative you format the span element to be as absolute and at the top:0;left:0; so it stays upper left and you set the padding-left (or: padding:0px 0px 0px 80px;) to set this free space for span element.

It should work better for simple cases.

score 1 · Answer 8 · answered Feb 18 '18 at 03:45

1

try this

> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">

answered Feb 18 '18 at 03:45

Rahmad Saleh

51
3

score 0 · Answer 9 · answered Nov 02 '08 at 23:00

You can do it using a table, but it is not pure CSS.

<style>
ul{
    text-indent: 40px;
}

li{
    list-style-type: none;
    padding: 0;
}

span{
    color: #ff0000;
    position: relative;
    left: -40px;
}
</style>


<ul>
<span></span><li>The lazy dog.</li>
<span>AND</span><li>The lazy cat.</li>
<span>OR</span><li>The active goldfish.</li>
</ul>

Note that it doesn't display exactly like you want, because it switches line on each option. However, I hope that this helps you come closer to the answer.

score -1 · Answer 10 · answered Nov 02 '08 at 23:45

Well, there's always the brute force method:

<li><pre>    The lazy dog.</pre></li>
<li><pre>AND The lazy cat.</pre></li>
<li><pre>OR  The active goldfish.</pre></li>

Or is that what you meant by "padding" the text? That's an ambiguous work in this context.

This sounds kind of like a homework question. I hope you're not trying to get us to do your homework for you?

score -1 · Answer 11 · answered Apr 04 '19 at 13:48

-1

ul {
 list-style-type: none;
 padding-left: 0px;
}

ul li span { 
 float: left;
 width: 40px;
}

<ul>
    <li><span></span> The lazy dog.</li>
    <li><span>AND</span> The lazy cat.</li>
    <li><span>OR</span> The active goldfish.</li>
</ul>

answered Apr 04 '19 at 13:48

Pepe Unodostres

9

CSS fixed width in a span

11 Answers11

Linked

Related