Is it possible to give an li element a fixed width.
On the following webpage:
<!-- m --><a class="postlink" href="http://www.property-description.com/?cl=property&op=brochure&prid=55">http://www.property-description.com/?cl ... re&prid=55</a><!-- m -->
Just below the text "Currently Available" there are 7 bullet points displayed using the <ul> and <li> elements. In order to make better use of the space available I would like these bullet points to display as 2 columns.
I thought I would be able to do this by getting the list to display horizontally with the following CSS:
li {
display: inline;
width: 50px;
}
The problem is that I cannot set the width of the li and therefore I cannot get it do display as 2 columns.
Any ideas would be most welcome. Thanks in advance for any help.Width does not apply to in-line elements. Perhaps you could leave them as block elements but alternately float them left and right?
CSS:
li.left {
width: 50px;
float: left;
clear: left;
}
li.right {
width: 50px;
float: right;
clear: right;
}
HTML:
<ul>
<li class=left>Item 1</li>
<li class=right>Item 2</li>
<li class=left>Item 3</li>
<li class=right>Item 4</li>
</ul>Forgot to mention that the number of bullet points is not always the same. The html is created dynamically and I cannot generate anything like the following html:
<ul>
<li class=left>Item 1</li>
<li class=right>Item 2</li>
<li class=left>Item 3</li>
<li class=right>Item 4</li>
</ul>Forgot to mention that the number of bullet points is not always the same. The html is created dynamically and I cannot generate anything like the following html:
<ul>
<li class=left>Item 1</li>
<li class=right>Item 2</li>
<li class=left>Item 3</li>
<li class=right>Item 4</li>
</ul>
Are you sure you can't? It's relatively simple to to alternate like that for each element. Otherwise you'd might have to make two lists, which I'd disagree with.Yes I am sure. My post is really about trying to achieve the desired effect via CSS with the given html.
On the following webpage:
<!-- m --><a class="postlink" href="http://www.property-description.com/?cl=property&op=brochure&prid=55">http://www.property-description.com/?cl ... re&prid=55</a><!-- m -->
Just below the text "Currently Available" there are 7 bullet points displayed using the <ul> and <li> elements. In order to make better use of the space available I would like these bullet points to display as 2 columns.
I thought I would be able to do this by getting the list to display horizontally with the following CSS:
li {
display: inline;
width: 50px;
}
The problem is that I cannot set the width of the li and therefore I cannot get it do display as 2 columns.
Any ideas would be most welcome. Thanks in advance for any help.Width does not apply to in-line elements. Perhaps you could leave them as block elements but alternately float them left and right?
CSS:
li.left {
width: 50px;
float: left;
clear: left;
}
li.right {
width: 50px;
float: right;
clear: right;
}
HTML:
<ul>
<li class=left>Item 1</li>
<li class=right>Item 2</li>
<li class=left>Item 3</li>
<li class=right>Item 4</li>
</ul>Forgot to mention that the number of bullet points is not always the same. The html is created dynamically and I cannot generate anything like the following html:
<ul>
<li class=left>Item 1</li>
<li class=right>Item 2</li>
<li class=left>Item 3</li>
<li class=right>Item 4</li>
</ul>Forgot to mention that the number of bullet points is not always the same. The html is created dynamically and I cannot generate anything like the following html:
<ul>
<li class=left>Item 1</li>
<li class=right>Item 2</li>
<li class=left>Item 3</li>
<li class=right>Item 4</li>
</ul>
Are you sure you can't? It's relatively simple to to alternate like that for each element. Otherwise you'd might have to make two lists, which I'd disagree with.Yes I am sure. My post is really about trying to achieve the desired effect via CSS with the given html.