ansaurus

Question

Answer 1

+19 A:

<style type="text/css">
ul 
{
 list-style-type: none;
 padding-left: 0px;
}

ul li span { 
 float: left;
 width: 40px;
}
</style>

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.

Stephen Caldwell 2008-11-02 22:55:37

indeed this is a little more elegant :)

Eoin Campbell 2008-11-02 23:07:24

<span> is an inline element by default - and floating it won't give it a width.

codeinthehole 2008-11-02 23:14:32

The float property generates a "block box" which does have a width.

Stephen Caldwell 2008-11-02 23:23:38

@touqen, the css you've provided doesn't give the span an equal width in ff3 or opera 9.51

codeinthehole 2008-11-03 00:00:48

@codeinthehole -- Really? It works just fine here (ff-3.0.3).

Stephen Caldwell 2008-11-03 01:55:08

@touqen - my error... I left out a UL

codeinthehole 2008-11-03 02:51:10

Answer 2

+3 A:

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>

DrJokepu 2008-11-02 22:56:44

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 2010-02-11 16:22:16

Answer 3

A:

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.

luiscubal 2008-11-02 23:00:21

Answer 4

+1 A:

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>

Slace 2008-11-02 23:01:05

Answer 5

+23 A:

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

codeinthehole 2008-11-02 23:27:37

Answer 6

A:

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?

eaolson 2008-11-02 23:45:37

Answer 7

A:

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.

Arturro 2010-04-15 13:39:51

ansaurus

tags:

views:

answers:

CSS fixed width in a span.

related questions