This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
HTML List element : Sharing the parent width into equal parts
I have a div that contains a ul element:
<div style="width: 800px">
<ul style="width: 100%">
<li>...</li>
....
<li>...</li>
</ul>
</div>
How do I automatically give the li elements equal space throughout the ul?
If you are looking to span a list horizontally, this should suffice:
HTML
<div>
<ul id="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>
CSS
#list li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
In this case, I adjust the padding to span the items evenly as I would like them to be.
I would use this css:
#list li
{
display: inline;
list-style-type: none;
padding-right: 20px;
***width:100px;***
}
Related
How would you make all of the <li> items in a <ul> element to be displayed in a line, and how would you center that entire list on the page? You must apply your CSS directly to the <ul> element itself, you cannot use a parent element.
I tried with display:inline-flex but then you can't align the <li> items in center so any possible way to do this?
Here is my Fiddle but I cannot align the <li> in center as :
https://jsfiddle.net/pymg30yr/
The problem with inline-flex is that your ul will take the width of its content so you cannot center the items inside (as there is no space either side)
In order to fix this, just make the ul flex and then add justify-content:center:
ul {
padding:0;
margin:0;
display: flex;
list-style: none;
justify-content:center;
}
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>
html
<ul>
<li>a list item </li>
<li>a loooooooooooooooooooong list item </li>
<li>another list item</li>
</ul>
css
ul {
display: table;
margin: 0 auto;
}
li {
float: left;
margin: 0 10px;
list-style-type: none;
}
demo
http://jsfiddle.net/fNFYr/467/
I have two divs. When I rollover on a link, I want to hide one div and show the other so it appears as if the background color has changed. Here is some example HTML:
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="sub-nav">
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</div>
The sub-nav div is EXACTLY the same as the main-nav div, except the background-color is different.
#main-nav {
width: 500px;
height: 250px;
background-color: black;
display: block;
}
#sub-nav {
width: 500px;
height: 250px;
background-color: white;
display: none;
}
All I want to do is show the #sub-nav div whenever an item in the #main-div is hovered over. So the effect will be that the background-color appears to change from black to white on hover.
Can I do this using only CSS?
Basically I am wanting to know if I can change the display property of a containing div whenever an element inside that div (the <a> tag) is hovered over? That is, hovering on a link should cause its containing div #main-nav to change to display: none and the #sub-nav div to become display:block
No you can't do this just with CSS. You would need the subnav to be a child of the element you are hovering or directly adjacent to it.
You could use css selectors like
#main-nav li:hover .sub-nav{}
or
#main-nav li:hover + .sub-nav{}
Alternatively you could use javascript
Why not just change the background color? Like this:
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
#main-nav:hover { background-color: black; }
Edit you can do exactly what you asked, but you'd need a wrapper for that:
<div class="navigation-wrapper">
<div class="main">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="sub">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
And in your css:
.navigation-wrapper .sub { display: none; }
.navigation-wrapper:hover .main { display: none; }
.navigation-wrapper:hover .sub { display: block; }
Fiddle demo
Is it possible somehow achieve to display LI tags from one UL in multiple columns?
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
I now I can get it with nested ul tags, but if is it possible it would be great! Even when some li tags would be used to separate columns, but I don't know how to style it.
Add a wrapper around your UL and use the new CSS3 "columns":
<div class="columns">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
And then style with CSS:
.columns {
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
}
Here's a jsFiddle: http://jsfiddle.net/NEHwE/
It is possible to have them floating left, and clearing them every n items. This would simulate a fixed amount of columns, and work in IE9+ and all the other browsers
li{
float: left;
}
li:nth-child(4n+1){ /*replace 4 with the number of columns*/
clear: left;
}
JSFiddle
The old fashion way.
the css style:
.ul li { float: left; margin-right: 20px; }
and the implementation:
<div class="ul">
<ul>
<li>Col 1</li>
<li>Col 2</li>
<li>Col 3</li>
<li>Col 4</li>
</ul>
</div>
I have a parent <ol> and couple of <li> items in that.
<ol style='width=800px;display :block;float:left;'>
<li style='display :block;float:left;'> Item 1 </li>
<li style='display :block;float:left;'> Item 2 </li>
<li style='display :block;float:left;'> Item 3 </li>
<li style='display :block;float:left;'> Item 4 </li>
</ol>
Is there any way my list item can be arranged in a way where it will equally divide the parent width (800px), and each item will have the same amount of width? I.e. each <li> will take 200px width.
I don’t want to hardcode the value. Is there any style attribute which will do that?
I dont want to hardocode the width like 20 % or something because the list items are dynamically added.it may be 4 or 5 or 6 sometimes
Try this: http://jsfiddle.net/QzYAr/
For details on display: table-cell: Is there a disadvantage of using `display:table-cell`on divs?
table-layout: fixed ensures equal width li elements.
CSS:
ol {
width: 400px;
/*width: 800px;*/
display: table;
table-layout: fixed; /* the magic dust that ensures equal width */
background: #ccc
}
ol > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
HTML:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
I think this is what you're asking for. It required jQuery though.
http://jsfiddle.net/sKPLQ/3/
CSS:
ul {
width: 800px;
}
li {
display: inline-block;
float:left;
}
JS:
var evenWidth = $(".list").width()/$(".list li").size();
$(".list li").css("width", evenWidth);
HTML:
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Here is a minimalistic design. It will produce responsive equal distance cells
<style>
div { border:1px solid red; width:400px; height:400px; }
ul { width:100%; height:50px; list-style: none; margin:0; padding:0; text-align: center; }
li { background-color:green; color:White; width:1%; position:relative; display:table-cell; border:solid 1px white; }
</style>
<div>
<ul>
<li>CELL 1</li>
<li>CELL 2</li>
<li>CELL 3</li>
<li>CELL 4</li>
</ul>
</div>
The magic is width:1%; position:relative; display:table-cell;
As Renesis pointed out, I think table cells is the only option, unless you're scripting it. Although you can use table-cell in CSS.
#menu {display: table-row;}
#menu li {display: table-cell;}
..which will simulate the behaviour. Note that in IE it will, as usual, cause problems in the lower versions.
Please note: The original poster edited their question to exclude percent after I posted this answer.
Yes, you simply need to figure out the percent that each will use. In this case, 20%.
Also, you have some slight problems with your HTML (missing quote and width= instead of the correct width:).
<style>
ol { width:800px;display :block;float:left; }
li { border:1px solid black; display :block;float:left; width:20%; }
</style>
<ol>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ol>
Update:
While you can get away without defining pixels by using a percentage, there is no way with block elements to get away without defining any width value (and width values are only valid as a unit or a percentage).
Not that I'm suggesting you use tables, but table cells are the only elements in HTML that sort of behave like what you are asking for.
Please take a look at the footer of http://www.animefushigi.com/, I am trying to make the affiliate list 2 columns, as 1 is too long.
The code is as follows
<ul class="none"><li><span>Affiliates<em> </em></span></li>
<li>link 1</li>
<li>link 2</li>
etc etc
you can try something like this using only css: http://jsfiddle.net/seler/ThvUJ/ (wont work in ie lte 8)
but i think the best way to do it will be making js script, which will count li elements and add </ul><ul> if necessary. (example: http://jsfiddle.net/seler/ThvUJ/3/)
If the order doesn't matter (and I'm assuming it doesn't because you're using an unordered list), you could achieve this effect with your current HTML. Just float your list elements in such a way that only two of them can fit per line. Below is a quick example of what I mean:
ul {
width: 200px;
list-style: none;
}
li {
float: left;
width: 90px; /* 100 - 5 - 5 */
margin: 3px 0;
padding: 0 5px;
}
li a {
width: 90px;
display: block;
}
maybe you can make nested ul like this:
<ul class="none">
<li><span>Affiliates<em> </em></span></li>
<ul>
<li>link 1</li>
<li>link 2</li>
</ul>
<ul>
<li>link 3</li>
<li>link 4</li>
</ul>
</ul>
If you want your footer to be a specific height, you can do this: http://jsfiddle.net/NfMPX/
Basically, set the height of the ul and float and set a width for the lis and they will automatically wrap.