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.
The answer is
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
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.
try this
> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">
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
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> </span>something</li>
<li><span>AND</span>something else</li>
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_x000D_
{_x000D_
font-family: Arial;_x000D_
font-size:20px;_x000D_
}_x000D_
_x000D_
div_x000D_
{_x000D_
width:200px;_x000D_
font-size:80px;_x000D_
background-color: lime;_x000D_
}_x000D_
div span_x000D_
{_x000D_
display:block;_x000D_
width:200px;_x000D_
background-color: lime;_x000D_
}_x000D_
_x000D_
ul li span_x000D_
{_x000D_
display: inline-block;_x000D_
width: 80px;_x000D_
background-color: yellow;_x000D_
}_x000D_
span.tab_x000D_
{_x000D_
display: inline-block;_x000D_
width: 80px;_x000D_
background-color: yellow;_x000D_
}<DIV>_x000D_
_x000D_
<div class='test'>ABCDEF</div>_x000D_
_x000D_
<SPAN>_x000D_
_x000D_
<div>_x000D_
<span class='test'>ABCDEF</span>_x000D_
</div_x000D_
_x000D_
<br>_x000D_
_x000D_
<ul>_x000D_
<li><span class='tab'> </span> The lazy dog.</li>_x000D_
<li><span class='tab'>AND</span> The lazy cat.</li>_x000D_
<li><span class='tab'>OR</span> The active goldfish.</li>_x000D_
</ul>PS: I have defined tab class because ul li span CSS selector is not working on my PC !
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?
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"> </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>
<style type="text/css">
span {
position:absolute;
width: 50px;
}
</style>
You can do this method for assigning width for inline elements
ul {_x000D_
list-style-type: none;_x000D_
padding-left: 0px;_x000D_
}_x000D_
_x000D_
ul li span { _x000D_
float: left;_x000D_
width: 40px;_x000D_
}<ul>_x000D_
<li><span></span> The lazy dog.</li>_x000D_
<li><span>AND</span> The lazy cat.</li>_x000D_
<li><span>OR</span> The active goldfish.</li>_x000D_
</ul>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> </span>something</li>
<li><span>AND</span>something else</li>
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
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> </span>something</li>
<li><span>AND</span>something else</li>
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"> </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>
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.
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
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?
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> </span>something</li>
<li><span>AND</span>something else</li>
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.
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.
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.
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?
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.
try this
> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">
<style type="text/css">
span {
position:absolute;
width: 50px;
}
</style>
You can do this method for assigning width for inline elements
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_x000D_
{_x000D_
font-family: Arial;_x000D_
font-size:20px;_x000D_
}_x000D_
_x000D_
div_x000D_
{_x000D_
width:200px;_x000D_
font-size:80px;_x000D_
background-color: lime;_x000D_
}_x000D_
div span_x000D_
{_x000D_
display:block;_x000D_
width:200px;_x000D_
background-color: lime;_x000D_
}_x000D_
_x000D_
ul li span_x000D_
{_x000D_
display: inline-block;_x000D_
width: 80px;_x000D_
background-color: yellow;_x000D_
}_x000D_
span.tab_x000D_
{_x000D_
display: inline-block;_x000D_
width: 80px;_x000D_
background-color: yellow;_x000D_
}<DIV>_x000D_
_x000D_
<div class='test'>ABCDEF</div>_x000D_
_x000D_
<SPAN>_x000D_
_x000D_
<div>_x000D_
<span class='test'>ABCDEF</span>_x000D_
</div_x000D_
_x000D_
<br>_x000D_
_x000D_
<ul>_x000D_
<li><span class='tab'> </span> The lazy dog.</li>_x000D_
<li><span class='tab'>AND</span> The lazy cat.</li>_x000D_
<li><span class='tab'>OR</span> The active goldfish.</li>_x000D_
</ul>PS: I have defined tab class because ul li span CSS selector is not working on my PC !
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"> </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>
Source: Stackoverflow.com