I want to have some list items (floated) with 100% width.
The number of list items is arbitrary, it could be 1 or 2, or it could be 20 or 30.
When there are more items than can fit in 100% width of the page, I want it to have a scroll bar to scroll through.
This is what I am currently using, but it doesn't create the scroll. I am guessing I need to set a width for overflow to work, but I want the width to be 100%.
.scroll {overflow-x:scroll;}
.scroll li {float:left}
<div class="scroll">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<div stye="clear:both"></div>
</ul>
</div>
So how can I keep a 100% width, with an horizontal scroll?
Add white-space: nowrap to .scroll ul
.scroll {overflow:auto; }
.scroll ul{ white-space: nowrap;}
.scroll li {display: inline-block;}
JS Fiddle: http://jsfiddle.net/f6CRt/
Don't use float at all. Floated elements are block level, and white-space: nowrap;, which causes text to go off screen, only works for inline elements -- Here's a possible duplicate of your question...
So basically use:
.scroll {
display: block;
overflow: scroll;
white-space: nowrap;
}
.scroll li {
display: inline;
}
Here's a fiddle
Related
Zurb Foundation's top-bar is extremely useful. It works great as a main navigation for a site/app, and collapses to a mobile-friendly format on smaller devices.
Its one major shortcoming is the ability to make the top-bar full-width with evenly spaced nav items. Is there a way to make the top-bar full-width and the nav items evenly spaced?
Example
If the top-bar has 6 nav items (width varying length titles) and we're using the default width of 1000px for .rows (with 15px gutters) the 6 nav items should evenly space themselves across the 970px top-bar. The first and last nav items should be left and right justified respectively.
As the screen size reduces the nav items should shrink in width to maintain their even spacing until the $topbar-breakpoint causes the top-bar to collapse to the mobile format.
Requirements
The solution should be CSS-based.
The solution should match Foundation 5's compatibility chart. Namely this means it needs to support IE9+.
Beneath the $topbar-breakpoint the top-bar should work as normal.
Here's a jsFiddle with the Foundation 5 resources already loaded.
Here is another solution. It is based on flexbox which hasn't been supported by browser for very long and it is still only a candidate recommendation: CSS Flexible Box Layout Module
jsFiddle
If you provide a good fallback, like the original Foundation CSS it can be used.
Update
You could also use this jQuery solution as a fallback as I haven't found any polyfills for flexbox: http://jsfiddle.net/borglinm/x6jvS/14/
.top-bar-section > ul {
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
}
.top-bar-section > ul > li {
float: none;
-webkit-flex: 1;
-moz-flex: 1;
flex: 1;
}
.top-bar-section > ul > li > a {
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
overflow: hidden;
}
Here's a solution that might need a bit of tweaking
JSFiddle Here
Sticking to the CSS-only requirements, the only feasible way I can think of is using CSS tables. We create nested table, table-rows and table-cells. The table-cells, by default, will try to maintain equal spacing between itself and other table-cells.
The table-row needs to span the entire topbar minus any Foundation topbar title-areas. To do this, we use an overflow: hidden trick to make the .top-bar-section span the remaining width of the topbar. Finally, we wrap our topbar with a div that has display: table and spans its parent.
Here's the relevant CSS
.top-bar-section {
overflow: hidden;
}
.center-topbar {
display: table;
width: 100%;
}
.center-topbar .full-width {
display: table-row;
}
.center-topbar .full-width li {
display: table-cell;
float: none;
text-align: center;
}
What we are left is with a topbar whose elements are centered and have widths that vary depending on its contents. The $topbar-breakpoint works as normal as well.
Improvements?
Works on Chrome + Safari well on my end (OS X). For Firefox, the dropdown arrow is not displaying due to the removal of the left float. Just wanted to post this to get the conversation going. Anyone have any improvements?
Here's a solution using some built in foundation classes...basically I added 4 classes to your fiddle.
http://jsfiddle.net/x6jvS/7/
<div class="row">
<div class="small-12 columns">
<nav class="top-bar contain-to-grid" data-topbar>
<ul class="title-area">
<li class="name">
<h1></h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="full-width web button-group large-block-grid-6">
<li>Link 1</li>
<li class="has-dropdown">
Long Link 2
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Even Longer Link 5</li>
<li>Link 6</li>
</ul>
</section>
</nav>
</div>
</div>
added class "contain-to-grid" to the nav element
added classes "web button-group large-block-grid-6" to the "section.top-bar-section > ul" (first ul in that section)
and blammo...seems to work fairly well cross-browser
How can I make the <li> item width fit the text length in Bootstrap 3? My menu item is shorter than the text which causes my class="active" to look ugly.
This is the navbar in which it occurs:
<div id="menu" class="col-md-1">
<ul class="nav nav-pills nav-stacked">
<li class="active">Startseite</li>
<li>Kontakt</li>
</ul>
</div>
make a .custom_li class and give
.custom_li{
display:inline-block;
}
EDIT
To force same size, i'll suggest using max-width and place it under some media-query
li{
display: inline-block;
max-width:50%; /* limit width */
word-break:break-all; /* wrap extended text*/
border:1px solid red /* demo */
}
demo here
some optional things
some optional things
When I tried display: inline-block; it removes the bullet.
Instead, I use float:left; to have them only as wide as text, while preserving the bullet. Optionally, add clear:both; to keep it as a vertical list with each item on a new line.
CSS
.my-list > li {
float: left;
clear: both; /* remove this if you want them flowing inline */
}
HTML
<ul class="my-list">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
If the display: inline-block; or display: block; is messing up the alignment.
Then just use width: fit-content;
Prevent it becoming a block by adding display: inline-block; to the proper element.
Post more code and preferably CSS if you want details.
I got it to work with the following css:
ul {
margin: 0 auto;
width: fit-content;
}
li{
display:flex;
margin: 0.5rem auto;
}
Basically what I did was make the container width to fit content. Used the CSS hack to make sure it would center using the margin. In the li tag I wanted the contents to be centered so I set it that way
Preface: Experienced coder, VERY new to CSS.
I've designed a website that uses a wrapper and has a horizontal banner that I want to fill with links on the top (Like retail sites that have their categories listed along the top).
I've placed all the links in a toplink class, and I have set position:relative;. My goal was to position them using top: and left:, and then space them out by setting all of their padding-left's to a certain degree. It seems when I do that, however, the last 2 links always jumps off the wrapper and moves to the left of the whole wrapper.
Any better ideas on how to implement this? I don't need solutions necessarily, just some ideas on how to move in a better path.
Assuming some simple markup like this:
<ul id="nav">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
<li>link 5</li>
</ul>
1) To space out links use text-align:justify with a pseudo element after it with 100% width
FIDDLE
(Resize browser window and also see what happens when you add/remove a list item from the markup)
CSS
#nav {
text-align: justify;
min-width: 500px;
}
#nav:after {
content: '';
display: inline-block;
width: 100%;
}
#nav li {
display: inline-block;
}
2) If you're looking for the links to expand/contract - you should use css tables for this
FIDDLE
(Resize browser window and also see what happens when you add/remove a list item from the markup)
CSS
#nav {
display:table;
table-layout: fixed;
width: 100%;
}
#nav li {
display: table-cell;
height: 25px;
background: beige;
border: 1px solid brown;
text-align: center;
}
Try getting rid of the position:relative and the top:0; left:0; stuff and use float:left on the anchors instead.
You don't position: relative or float: left to align them horizontally.
Anchors are inline elements so they'll align horizontally anyway. However, you could add some padding to visually separate them.
the following is my menu structure:
<ul>
<li> menu 1</li>
<li> menu 2<br/> description</li>
<li> menu 3</li>
<li> menu 4</li>
</ul>
as you noticed the second menu have a height different than other siblings cause of it's content
so take alook at the css
ul{
display:flex;
flex-direction:row;
flex-wrap: nowrap;
}
ul>li{
background-color:blue;
border:2px solid red;
}
this will display ul as a menu with items side by side in the center of the containing parent "ul" but unfortunately with different height
so how i can make children have the 100% of their parent using flexbox without adding custom height in pixel?
Put an align-self: stretch on the ul>li.
Check out the sample : http://cssdeck.com/labs/full/nttaiab7/
Consider a simple CSS layout, where containing wrapper div defines a fixed width of 900 or so pixels, everything inside it therefore expands to 100% width.
In here, I have a navigation div, containing 1 UL and 6 list items, left-floated so they appear in a line horizontally.
Each list item should growing variably to fit its text contents exactly, but the spacing between each item should be shared so that the whole menu fits into the 100% space, such as:
------------------------------------------------------
-N- -N- -N- -N- -N-
- - - - - - - - - -
- -ITEM1111- -ITEM222222- -ITEM33333333333- -ITEM44- -
- - - - - - - - - -
------------------------------------------------------
<-------------------- 100% -------------------------->
I hope that is illustrative! 'N' is constant but grows to fit the 100% width accordingly (i.e. for accessibility - someone increases the font size).
Happy to take alternative suggestions although I'm aiming for no javascript or images, just css purity.
Here is my simple solution for this based on CSS3 Flexible Box Layout:
Styles
ul {
padding: 0;
width: 100%;
}
ul li {
list-style: none;
text-align: center;
border: 1px solid Gray;
}
.flexmenu {
display: -webkit-box;
display: -moz-box;
display: box;
}
.flexmenu li {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex-basis: auto;
-moz-flex-basis: auto;
flex-basis: auto;
}
HTML
<div style="width:900px">
<ul class="flexmenu">
<li>short</li>
<li>looooooooooooooooooooooooooooooong</li>
<li>short</li>
<li>short</li>
</ul>
</div>
Result
If IE6/IE7 compatibility is not critical to you, this layout is trivial using display: table
http://jsfiddle.net/5SFG5/
Problem is that when an element is floated, its width is reduced to the actual width of the content. You can toy with this using Javascript though (I know you requested a no-js version, but I can't think of another option). In jQuery it should be fairly easy. Given this structure:
<ul id="nav">
<li>ITEM1</li>
<li>ITEM2</li>
<li>ITEM3</li>
</ul>
you could do something like this:
var width = 0, maxwidth = 900;
$('#nav li').each(function(){
width += $(this).width();
});
var count = 2 * $('#nav').size();
var margin = (maxwidth - width) / count;
$('#nav li').css({
marginLeft: margin + 'px',
marginRight: margin + 'px'
});
Sorry for the messy code, I'm in a bit of a hurry :D. Anyways, what you do is, basically: check the total width occupied by the li elements, check how much is unoccupied and fill it with li margins.
I'm not sure how N can be both a constant and a variable width.
Here's a start..
CSS
#nav { width: 100%; display: inline; }
#nav ul li {
display: block;
float: left;
margin: 2%;
width: 10%;
}
#nav ul li a {margin: 0 auto; display: block;}
html
<div id="nav">
<ul>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
</nav>