I have three <li>. Unfortunately I cannot give them each their own class name (otherwise this would be easier).
I need to have one aligned to the left, one to the centre and one to the right. Is there any way to do this in CSS that can account for a variably sized <ul>?
Looking at other questions there is an option to use li:last-child. It would still be a problem for anyone using most IE's as support only exists in IE9.
Fiddle Here http://jsfiddle.net/q4d9r/
Just use a width of 33% and a float:left on your li items.
Set your ul to whatever width you want.
EDIT:
If you absolutely need to align them perfectly, you could always use inline styles on top of the above method.
http://jsfiddle.net/q4d9r/1/
<ul class="test">
<li style="text-align:left">Item One</li>
<li style="text-align:center">Item Two</li>
<li style="text-align:right">Item Three</li>
</ul>
[edit] by the time I post, the basic float was good enough, il leave answer for curious people :) [/edit]
there's 2 options i think of without using float, nor display:table; (in fact 4 options are avalaible):
1) display:flex;
2) text-align:justify; and some tunning:
http://codepen.io/gc-nomade/pen/zcGmC
<ul class="flex">
<li>flex me</li>
<li>flex me</li>
<li>flex me</li>
</ul>
<ul class="justify">
<li>Justify me</li>
<li>Justify me</li>
<li>Justify me</li>
</ul>
.flex {
display:flex;
justify-content:space-between;
}
.justify {
text-align:justify;
}
.justify:after {
content:'';
display:inline-block;
width:100%;
}
.justify li {
display:inline-block;
}
Related
I am following the tutorial for the Foundation Top Bar and when running the code on the browser (Firefox and Chrome) it displays vertically not horizontally. I've tried using the display setting, changing it to inline and inline block and the problem remains.
As it is now there is no overriding CSS on it via the app.css file just the out of the box css in foundation.css file. Any ideas what could be causing this ? Thanks
<div class="top-bar">
<div class class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>
One
<ul class="menu vertical">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
There are multiple ways of doing that. You can, for example, either use inline, inline-block or flexboxes. You can learn more on the difference between inline and inline-block here, though, I believe using flexboxes is much more convenient and flexible (no pun intended).
Inline : Most likely not the best option.
Inline items are pretty restrictive. They only support margin-left, margin-right, padding-left, padding-right. Also, they do not have a height.
Inline-block : A better option.
Inline-block items support margin, padding, width, height. It's useful for vertical centering.
Although, you will need to deal with the whitespaces between the elements. This can become a pain sometimes.
Floats : A good option.
A lot of layout frameworks use floats. They are pretty handy, and there is a lot of documentation because they've been around for a while.
Flexboxes : Probably the best option currently available.
Flexboxes give you a lot of freedom. They support all of the above, plus a few extras.
The order of the items is independent from the source. You can order your items directly in the css, which can be pretty useful (for responsive layouts, for example). It also supports equal-height.
Flexboxes have a steep learning curve though, IMHO. The syntax is not very intuitive, and your template can sometimes get bloated with a lot of wrapper divs.
/* Inline example */
.inline li {
display: inline;
}
/* Inline-block example */
.inline-block li {
display: inline;
}
/* Floats example */
.float li {
float: left;
}
/* Flexboxes example */
.flexboxes ul {
display: flex;
}
.flexboxes .menu-item {
flex: 2;
}
.flexboxes .site-title {
flex: 1;
}
/* Common */
ul {
list-style-type: none;
}
div {
width: 100%;
}
li {
background-color: #ccc;
}
<div class="inline">
<ul>
<li>Site Title</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="inline-block">
<ul>
<li>Site Title</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="float">
<ul>
<li class="site-title">Site Title</li>
<li class="menu-item">One</li>
<li class="menu-item">Two</li>
<li class="menu-item">Three</li>
</ul>
</div>
<br>
<div class="flexboxes">
<ul>
<li class="site-title">Site Title</li>
<li class="menu-item">One</li>
<li class="menu-item">Two</li>
<li class="menu-item">Three</li>
</ul>
</div>
For my webpages I have a container DIV, within that a menu DIV and a content DIV. I am arranging several 'settings' DIVs within the content DIV and I wan them to float left within the content DIV but lower ones end up under the menu DIV.
Check this jsfiddle to see clearly: http://jsfiddle.net/4KUTy/5/
The settings divs have the properties of float:right; but that leaves the last one in the wrong position and if I float:left;, then it goes under the menu.
Please help.
jsfiddle html code here:
<html>
<head/>
<body>
<div id="container">
<div class="menu">
<ul>
<li>menu option 1</li>
<li>menu option 2</li>
<li>menu option 3</li>
<li>menu option A</li>
<li>menu option B</li>
<li>menu option C</li>
</ul>
</div>
<div id="content">
<div class="settings_div">Project Settings<br/>
<ul style="display:inline-block">
<li>language</li>
<li>currency</li>
<li>mark up</li>
</ul>
</div>
<div class="settings_div">Your Company Settings<br/>
<ul style="display:inline-block">
<li>company details</li>
<li>bank details</li>
<li>contact details</li>
</ul>
</div>
<div class="settings_div">Output Settings <br/>
<ul style="display:inline-block">
<li>company logo</li>
<li>date format</li>
<li>fonts etc</li>
</ul>
</div>
<div class="settings_div">Graphical Settings<br/>
<ul style="display:inline-block">
<li>colors</li>
<li>text size</li>
<li>more</li>
</ul>
</div>
<div class="settings_div">I WANT THIS ONE ON THE LEFT!<br/>
<ul style="display:inline-block">
<li>But NOT under the menu</li>
<li>float:left puts it under the menu</li>
<li>should be under graphical settings</li>
</ul>
</div>
</div>
</div>
</body>
</html>
jsfiddle css here:
.settings_div {
text-align:left;
display:inline;
width:300px;
height:80px;
padding:20px;
padding-top:10px;
margin:20px;
margin-top:0px;
margin-bottom:20px;
border-color:#33CCCC;
border-style:solid;
border-width:thick;
float:right;
}
#content {
width:600;
min-height:620px;
vertical-align:top;
display: inline;
}
.menu {
padding:5px;
background-color:#33CCCC;
float:left;
text-align:left;
width:auto;
}
#container {
margin-bottom:10px;
background-color:#eee;
width:950px;
min-height:620px;
border-radius:0px;
position:relative;
margin-top:-10;
margin-right:auto;
margin-left:auto;
overflow: visible;
}
The container of the floated divs should have:
overflow: hidden; /* Makes the container actually "contain" the floated divs */
display: block;
The floated divs should be
float:left
fiddle: http://jsfiddle.net/4KUTy/5/
I found a nice post that attempts to explain why overflow:hidden works the way it does: http://colinaarts.com/articles/the-magic-of-overflow-hidden/
In case the link dies: Setting overflow to anything other than visible will cause it to establish a new block formatting context (http://www.w3.org/TR/CSS21/visuren.html#block-formatting).
Two things are wrong here:
The wrapper div.content is set to display: inline.
The wrapper div.content does not scale correctly since all child elements are out of the flow.
In order to make the setting divs behave correctly use:
.content { display: block; overflow: hidden; }
and then float left all setting div's.
See updated fiddle:
http://jsfiddle.net/4KUTy/7/
Just add a placeholder div before the last div
<div class="settins_div placeholder">placeholder</div>
and add css-rule
.placeholder{
visibility: hidden;
}
have a jsfiddle to check: here
There are only small changes to your css rules:
You should add a fixed width to your menu.
.menu {
padding:5px;
background-color:#33CCCC;
float:left;
text-align:left;
width:150px;
}
And your container needs to be "moved" by that value + margin to the right. So add a margin-left to it:
#content {
width:600;
min-height:620px;
vertical-align:top;
margin-left: 160px;
}
Set your #container to overflow: hidden.
And now every settings div should be floated left.
An updated version of your jsfiddle:
http://jsfiddle.net/4KUTy/8/
Make all settings_div float:left;, but use another container that floats right and is wide enough:
<div id="setting-container" style="float:right;width:800px;">
<div class="settings_div">Your Company Settings<br/>
<ul style="display:inline-block">
<li>company details</li>
<li>bank details</li>
<li>contact details</li>
</ul>
</div>
<div class="settings_div">Output Settings <br/>
<ul style="display:inline-block">
<li>company logo</li>
<li>date format</li>
<li>fonts etc</li>
</ul>
</div>
<div class="settings_div">Graphical Settings<br/>
<ul style="display:inline-block">
<li>colors</li>
<li>text size</li>
<li>more</li>
</ul>
</div>
<div class="settings_div">I WANT THIS ONE ON THE LEFT!<br/>
<ul style="display:inline-block">
<li>But NOT under the menu</li>
<li>float:left puts it under the menu</li>
<li>should be under graphical settings</li>
</ul>
</div>
</div>
jsfiddle
Here is my result http://jsfiddle.net/burn123/4KUTy/10/
Major Changes
I changed a lot of the float properties to display:inline-block. The reason for this is so that all of the elements position themselves correctly.
I took off the width for container, so now it should be slightly more responsive
I removed the settings_div class and changed the CSS to #content div to save code
Added display:inline-block to the ul in the CSS and took it off of the inline styles
A rather large problem was you had a property of the content set as width:600, when it needed to be width:600px;. I ended up removing this style.
Because you had the #container set to a positioning of relative, then I changed margin-top:-10; to top:-10px;
Small Changes
Condensed a lot of properties such as margin and border
Removed the width, overflow, and min-height from container because they served no purpose
Update - http://jsfiddle.net/burn123/4KUTy/12/
Added border-box to every element so that it will display the exact width that you specify
Added a fluid width to container so that it will display inline with the menu when needed, but then will drop down when it is too full
I have 6 links, all different character lengths on two lines. I need everything to align evenly. Like this:
Home About Us Location
Contact Visit Schedule
I imagine the way to do this is to make the li a specific width and then apply an appropriate margin to the right side, but for some reason I can't apply a width. If I have the following html skeleton, how would I edit the CSS to accomplish this? I've looked around the web for a solution, but I've haven't found any similar questions because my menu sits on two separate lines.
<div class="footer">
<ul id="footerlinks">
<li>Home</li>
<li>About Us </li>
<li>Location</li>
<br>
<li>Contact</li>
<li>Visit</li>
<li>Schedule</li>
</ul>
Fix the width of <ul> and <li>. And remove the <br /> it makes the markup invalid.
HTML
<ul id="footerlinks">
<li>Home</li>
<li>About Us </li>
<li>Location</li>
<li>Contact</li>
<li>Visit</li>
<li>Schedule</li>
</ul>
CSS
#footerlinks { width: 300px; }
#footerlinks li { width: 100px; display: inline-block; }
Demo
Demo(with white-space fix)
Give the li elements a display property of inline-block and a width. Here's a jsfiddle to demonstrate:
li { display: inline-block; width: 100px; }
Check this:
<pre>
test
test
test
</pre>
Source: How do I create tab indenting in html
First, a <br/> is not a valid child element of <ul/>.
To apply a width to an <li/>, you will need to make it a block-level element.
<ul id="footerlinks">
<li>Home</li>
<li>About Us </li>
<li>Location</li>
<li>Contact</li>
<li>Visit</li>
<li>Schedule</li>
</ul>
and
#footerlinks {
background:#ccc;
overflow:hidden;
padding:5px;
width:300px;
}
#footerlinks li {
float:left;
padding:5px 0;
width:33%;
}
Here is a working example - http://jsfiddle.net/jaredhoyt/xbvyP/
To make lists horizontal and hide default bullets, is it necessary to give {display:inline} and {float:left} both to the <li> tags or anyone of these alone is enough?
<ul>
<li>First item</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>Last item</li>
</ul>
How to make cross browser (including IE6 and FF2) , pixel perfect horizontal list without bullet in best way?
What is best and short method?
ul {}
li {}
a {}
No, either one alone is enough. You could even use inline-block if you like, although it doesn't have very good support in FF2. Hiding bullets is done with list-style:none;
You could setup a simple test quickly to check these:
#one, #two, #three { list-style:none }
#one li { float:left }
#two li { display:inline }
#three li { display:inline-block }
<ul id="one">
<li>Float left</li>
<li>In this example</li>
</ul>
<div style="clear:both"></div>
<ul id="two">
<li>Display inline</li>
<li>In this example</li>
</ul>
<div style="clear:both"></div>
<ul id="three">
<li>Inline-block</li>
<li>In this example</li>
</ul>
See how they render: http://jsbin.com/opiqu3/
display:inline is not necessary but float:left is necessary to make it horizontal and like you said about hiding default bullets, then even list-style:none is also necessary.
Given the following markup:
<ul>
<li>apple</li>
<li class="highlight">orange</li>
<li>pear</li>
</ul>
Both the uls and the lis widths appear to be 100%. If I apply a background-color to the list item, the highlight stretches the full width of the page.
I only want the background highlight to stretch as wide as the widest item (with maybe some padding). How do I constrain the lis (or perhaps the uls) width to the width of the widest item?
Adding ul {float: left; } style will force your list into preferred width, which is what you want.
Problem is, you should make sure next element goes below the list, as it did before. Clearing should take care of that.
Can you do it like this?
<ul>
<li>apple</li>
<li><span class="highlight">orange</span></li>
<li>pear</li>
</ul>
Exactly as BoltBait said, wrap your text in an inline element, such as span and give that the class.
<ul>
<li>apple</li>
<li><span class="highlight">orange</span></li>
<li>pear</li>
</ul>
My extra 2 cents is that if you don't have access to change the HTML, you can do it using Javascript. In jQuery:
$('li.highlight').wrapInner("<span></span>");
and use the CSS:
li.highlight span { background-color: #f0f; }
edit: after re-reading your question, can you clarify: do you want the highlight to only go as wide as the element which is highlighted, or as wide as the widest element in the list? eg:
- short
- items ********************
- here
- and then a really long one
...where the asterisks represent the highlighting. If so, then buti-oxa's answer is the easiest way. just be careful with clearing your floats.
Adding style="float: left;" to ul will cause the ul to only stretch as wide as the widest item. However, the next element will be placed to the right of it. Adding style="clear: left;" to the next element will place the next element after the ul.
Try it out
See documentation on float and clear.
The best way of going about solving this without messing up the style of your existing layout, is by wrapping the ul and li in a div with display: inline-block
<div id='dropdown_tab' style='display: inline-block'>dropdown
<ul id='dropdown_menu' style='display: none'>
<li>optoin 1</li>
<li>optoin 2</li>
<li id='option_3'>optoin 3
<ul id='dropdown_menu2' style='display: none'>
<li>second 1</li>
<li>second 2</li>
<li>second 3</li>
</ul>
</li>
</ul>
</div>
None of the existing answers provide the correct solution, unfortunately. They range from abusing the float property to totally restructuring your HTML, something which often isn't feasible.
The <ul> element has display: block; as its default display property, causing the width to fill 100% of its container.
To change this aspect and still retain all the other default properties of how a <ul> is displayed (e.g. avoid issues with float from other answers), apply display: inline-block; to the list:
ul {
display: inline-block;
background-color: green;
}
.highlight {
background-color: orange; /* for demonstration */
padding: 15px; /* for demonstration */
}
<ul>
<li>apple</li>
<li class="highlight">orange</li>
<li>pear</li>
<li>banana</li>
</ul>