http://thehamburgercollection.com/shop/
If you look at the menu, you'll notice that all of the menu items are aligned left within a container in a single column. But what I want is for them to spread out evenly in a single row, and then to collapse into a hamburger menu at tablet and mobile size.
I know that <ul> is by default a block element, so I tried giving the <ul> with the id "menu-navigation-1" and the class of "menu" a style of
display:inline-block;
But nothing's happening.
I also tried assigning
display:inline-block;
to the div that encompasses the ul, which has a class of "menu-navigation-container", but that didn't work either. Once I'm able to distribute the menu items evenly in a single row, I'll be able to create the hamburger menu. This is a perfect example of how we want the menu to behave.
Close! The list item (li) elements need to have display: inline-block;, not the list itself (ul).
This will work:
.menu-item {
display: inline-block;
margin-right: 10px; /* add a gap between items */
}
Related
I have a menu which is made as a list with inline items. While rendering correctly on large screens, elements move underneath the menu when the browser window gets smaller, instead of putting them to the right of the rest of the content.
With min-width:100%; for .drop_menu I was expecting that the menu would be 100% of the screen width at minimum, but stretch to fit more menu items in the x direction if necessary.
With width:500px; for .drop_menu it works, but I didn't want to give the menu a fixed width.
The reason that I want the items to overflow in the x direction is because I was going to implement a javascript scroller so the menu would scroll when the mouse cursor gets close to the edge. I can't scroll in the x-direction if there's no x-overflow.
I've created a jsfiddle of my failing menu here: http://jsfiddle.net/j41jfjqL/3/
Since they are inline, use white-space:nowrap to prevent the list items from appearing on a new line.
Updated Example
.drop_menu {
white-space:nowrap;
}
.drop_menu > li {
white-space:normal;
}
Since you don't want this to occur on the children li elements, set the white-space property value to normal.
I am able to center horizontal list with text-align:center, but I wonder how can I keep it centered inside container, but has rows aligned left.
My container has percent width, so I need it working when resizing window and blocks are reordering
Please check the sample image below to understand my problem:
UPDATE:
Please find JsFiddle as per request
I need to center my <ul> inside div.container
Use this:
ul {
margin: auto;
}
li {
float: left;
}
See this fiddle:
You already know to center the <ul> with margin: auto;
The key is to adjust the <li> within it.
You can do that by using float: left;
Alternatively: you can set display: inline-block;
Both have a similar effect, but aren't identical. Play w/it.
By providing margins & percentage widths, you can play w/size and separation of the elements.
Since these are all block-level elements, they'll stack up & wrap automatically.
By floating or changing display of the <li> you keep them left-aligned within their parent element (the <ul>).
Also, by using separate CSS classes instead of targeting the <li> element directly, you leave things flexible in case you want to have a right-aligned list, or some other options later.
Wrap your boxes within another div.
You can then center that div with display: block; margin: 0 auto;, while keeping the boxes left-aligned.
I would like to position a list beside a floating box. The Problem ist, that the bullet points of the list items are displayed outside the principal block box. So the text of the items is aligned with the normal text, but not the bullet points.
Here's the code example: http://codepen.io/Juuro/pen/oelqm
If I use list-style-position: inside; it works as expected for items which are single-lined.
Another solution would be to put the whole list in a additional box or give it display: inline-block;. But then the list items would float around the box anymore.
My requirements are:
Bullet points beside the floating box should indent like without a floating box.
In multi-line items the bullet-point should stay "outside" of the text.
The list should still float.
Is that even possible?
Is this what you want? http://codepen.io/anon/pen/ueaiy
It seems your li in the stylesheet was inside the ul.
seeing your example and if not indented to decide what you can specify dimensions of the container tightly with a picture like this DEMO
.imagebox {
float: left;
margin: 0 10px 10px 0;
height: 200px;/**add**/
width: 170px; /**add**/
}
or in this class to the IMG tag to set a fixed size
can we take this existing fiddle (solution) for a bar chart and apply different height values,
http://jsfiddle.net/RYBFF/1/
what actually happening is the bar items are anchored to top of ul container whereas it should be anchored to the bottom when we scale items.
li.different {
height: 80px !important;
}
for instance applying different class to one of the list items will demonstrate the problem.
change display mode to inline-block
remove float: left;
And eventually add some margin to the first item in the list.
vertical-align only applies to inline or inline-block elements. Your list items were block elements.
fiddle
I have a design that I have to implement where the designer has a top navigation with evenly spaced items.
I have used an unordered list for this. The only way I could get the items evenly spaced is to use javascript (it is a CMS or the number of LIs can vary).
The problem I have is the LIs start out with no padding then the padding gets added by JS, when you flick between pages you see a noticeable jump.
Is there any way to achieve the same result through HTML, if possible avoiding tables?
Make your list items display:inline-block and then give them a width. The width should be in em units so it resizes with the text.
Won't look nice on IE6, but should be readable/navigable.
If we're talking evenly spaced horizontally, you want display: table-cell
ul { display: table; width: 100% }
li { display: table-cell }
Note that you do need the parent container to be display: table if you want it to take up all of the available width.