Is there a way I can get all <li> elements to fit in one line to the width of the window (and the text wraps accordingly?
HTML:
<ul>
<li>laksdjf laksdj flasdj fladjs flaksd</li>
<li>laksdjf laksdj </li>
<li>laksdjf laksdj flasdj fladjs flaksd fladjs flaksd</li>
<li>laksdjf laksdj flasdj fladjs flaksd</li>
</ul>
CSS:
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul li {
list-style-type: none;
padding: 0;
padding: 0 30px;
float:left;
}
The width of the li should be relative to the amount of text they have in it. If I put a fixed size on it, then the longer text ones are too squeezed.
http://jsfiddle.net/5gP3b/
You can use the display table and table-cell property to achieve it: http://jsfiddle.net/5gP3b/1/
Notice that this display property do not work on Internet Explorer 6 & 7 ...
Related
I am using a customer list style image for an LI and i am wanting to line up the text in the centre of the icon.
I have tried using margins and paddings to no avail.
Please see code below and screenshot
HTML:
<ul class="homeList">
<li>Over 1 million happy travellers</li>
<li>Over 450 local pick-up points with return travel for your convenience</li
<li>Great range of breaks across Britain, Europe & America</li>
<li>Included excursion programmes</li>
<li>Superb value assured</li>
</ul>
CSS:
.homeList li {
list-style-image: url(../images/bulleticon.png);
line-height: 20px;
padding: 0;
margin: 0;
}
And this is how it is looking currently
Instead of list-style-img use background-image for the list item.
li {
list-style: none;
background: url(../images/bulleticon.png) left center;
padding-left: 20px;
}
And you can change easier the image position as you change the background-position property.
I'm wondering if there's a way to determine the horizontal and vertical alignment of the list-style-image?
Because at the moment, it looks something like this :
_ LIST TEXT
and I would like it to be like this
– List Text
Thanks a lot!
You can try a couple of approaches, for example:
<h3>Using a list-style-image</h3>
<ul class="basic">
<li>Hello!</li>
<li>Good-Bye!</li>
<li>See you later!</li>
</ul>
<h3>Using a Background Image on li</h3>
<ul class="bg-img">
<li>Hello!</li>
<li>Good-Bye!</li>
<li>See you later!</li>
</ul>
and look at the following CSS:
ul.basic {
list-style: none;
list-style-image: url(http://placehold.it/20x20);
margin: 0 0 0 0;
}
ul.basic li {
margin: 1.00em 0 0 0;
padding: 0 0 0 0;
}
ul.bg-img {
list-style: none;
margin: 0 0 0 0;
}
ul.bg-img li {
background-image: url(http://placehold.it/20x5);
background-repeat: no-repeat;
background-position: left center;
margin: 1.00em 0 0 -30px;
padding: 0 0 0 30px;
}
In the first case, you can make the list image a 20x20 px square for example and embed the hyphen in the center of the image. However, if the font size changes, you won't maintain the vertical centering since the list image is pinned to the base line of the li element.
In the second example, turn off the list style and place a background image on the li element. Again, embed the hyphen in an image, and position it left and center. This approach gives you some control over the position of the hyphen motif by adjusting the left margin and padding of the li element, and the background-position property.
For reference, look at: http://jsfiddle.net/audetwebdesign/JKZLe/
This is controlled in webkit and mozilla, respectively, but the -webkit-padding-start and -moz-padding-start rules on <ul> and <ol> elements. It can be overridden by padding-left (this will work in IE as well).
ul {
padding-left: 40px;
}
My text menu items are not vertically aligning correctly in IE6 in my horizontal menu.
Example - http://blacktownworkersgroup.worldsecuresystems.com/bwc09/home
They seem to be ok in Firefox 3 and IE7.
I've made the background red for each item to make it more obvious.
Any ideas?
chage this class
#nav_468891 li { /* all list */
list-style: none;
margin: 0;
padding: 0;
display: inline;
line-height: 30px;
}
you can delete "vertical-align: middle;"
I'm building a navigation using the simple <ul><li></li><ul> system and floating them to the left side so they appear inline. The follow code works in all browsers except IE 6.
The HTML
<div id="sandbox_container">
<div id="sandbox_modalbox">
<div>
<ul id="sandbox_modalbox_nav">
<li id="Intro" class="modal_active">Item 1</li>
<li id="Queries">Item 2</li>
</ul>
</div>
<!-- more content here -->
</div>
</div>
The CSS
#sandbox_container {
min-height: 385px;
width: 940px;
padding-bottom: 20px
}
#sandbox_modalbox {
width: 940px;
padding-top: 5px;
margin-bottom: -10px;
}
ul#sandbox_modalbox_nav {
width: 936px;
height: 52px;
margin: 0px 2px 0px 2px;
padding-top: 0px;
display: block;
}
ul#sandbox_modalbox_nav li {
height:52px;
float: left;
list-style: none;
padding: 0px;
display: block;
}
ul#sandbox_modalbox_nav li a {
padding: 12px 30px 0px 30px;
height: 52px;
display: block;
}
I also put it up on JSBin.
I understand the problem is that I must define a width for the <li> for IE to float it properly, however I would prefer these remain variable width. Is there anyway to float them properly without restricting the width?
If I am understanding the problem correctly then in browsers other than IE6 the list items appear next to each other, but in IE6 they appear on top of each other.
If this is the case, it may be because the a elements are not floated even though their containing elements are. I would just use a conditional comment and add the following for IE6 only:
ul#sandbox_modalbox_nav li a { float:left; }
Also, Neall is right on track with the whitespace issue, even if it doesn't fix your current display problem it may cause some unwanted space to appear between items later.
Not that I can think of, I can't imagine how to declare a width that can change, except by defining it in ems. If you have a content that you know is likely to be less than ten characters, then width: 11em; padding: 0.5em 1em; is likely to offer enough space for the content while still defining a width.
IE 6 has some bugs with whitespace between <li> elements. Try putting all your list items on the same line with no space between them.
Edit: On further inspection, I don't think the whitespace is your problem. Your example has a lot of extraneous styles - it's hard to tell what the problem is.
I usually solve this by setting the floated list items to width: 0 for IE6. This for one reason or other causes them to have the correct dynamic width.
You can either do this in a conditional comment:
<!--[if lte IE 6]>
<style type="text/css">ul#sandbox_modalbox_nav li { width: 0; }</style>
<![endif]-->
Or simply take advantage of IE's lack of support for CSS selectors, by setting the width to 0, and then back to the default "auto" for modern browsers:
ul#sandbox_modalbox_nav li { width: 0; }
ul#sandbox_modalbox_nav > li { width: auto; }
For some reason this class outputs ok in IE but in Firefox the words and the lines ( | ) are not centered:
.horz_list li {
display: inline;
background-color: #CEE3F8;
border-right-style:thin;
padding-right: 4px;
padding-left: 4px;
}
This is the page for the output:
<div id="top_nav">
<ul class="horz_list">
<li>Nuevas</li>
<li>Comentarios</li>
<li class="last">Enviar</li>
</ul> <!-- ul.horz_list -->
</div> <!-- top_nav -->
If anyone know why is this, thanks.
Try changing the li's properties
.horz_list li{
display: block; /* block level */
float: left; /* float them inline to the left */
overflow: hidden; /* this will force the div to stretch to it's contained element */
background-color: #CEE3F8;
border-right-style:thin;
padding-right: 4px;
padding-left: 4px;
}
... or if you want what Ben described, the whole block centred, use
.horz_list {
margin: 0 auto;
}
Ensure it's containing block has a width, even if it's 100%.
If you're trying to get your list items to be horizontally centered, this is accomplished differently in IE vs. other browsers. Try setting margin-left:auto;margin-right;auto on your <ul>:
.horz_list {
margin-left: auto;
margin-right: auto;
}
Probably the reason for the extra spacing in Firefox is that if you set the LI as display:inline, the newline in your HTML code creates an extra space (just like if you type "lorem(newline)ipsum" the words may appear side to side in the page with a space between them).
Try, for example, to stick the <LI> tags together like this <li>....</li><li>.... and I think this will remove the unwanted spaces.
If you don't like to put it all into a single line, alex's suggestion works, but you may have to add a <div style="clear:both"></div> after the closing UL, because of floated elements.