When I have an unordered list formatted as inline-blocks, the last list element in the list appears to have extra top margin if the other elements have any block content. Take a look at this HTML:
<div id="report_builder">
<ul id="report_layout_1" class="report_layout ui-droppable">
<li rel="recid">Id
<div><input type="text" class="report-column-value"></div>
</li>
<li rel="street1">Address
<div><input type="text" class="report-column-value"></div>
</li>
<li>
Last Field
</li>
</ul>
</div>
Here is the CSS:
#report_builder li {
font-size: 8pt;
}
#report_builder > ul {
float: left;
}
.report_layout {
height: 150px;
}
.report_layout > li {
display: inline-block;
padding: 5px;
margin-left: 2px;
border: 1px solid #ccc;
border-top: 10px solid #ccc;
height: 100px;
background-color:#fff;
}
.report_layout > li:last {
cursor: default;
}
.report_layout > li a {
cursor: pointer;
}
.report_layout > li:nth-child(even) {
background-color:#eee;
}
#report_builder input.report-column-value {
width: 95px;
}
Why does that last list element drop down? Here is a fiddle to demo what I'm doing.
It is weird, but you should force your list items to align to the top using vertical-align: top;. See working version on jsfiddle.
That's because inline-block elements will align as inline, i.e., siblings will use the baseline as the alignment reference.
Elements with inline-block set on them render with a 4 pixel margin to the right.
See this.
It is an issue with the white space between the <li> elements. If you remove the white space, the issue will be resolved.
You could make the li float left and display: inline. They are lined up in your jsfiddle then.
http://jsfiddle.net/eHmtR/1/
Related
I have a list of 4 menu items sitting side by side using display:inline-block;. Each item is 120px, therefore I should be able to set the parent container to be 480px wide, however this sends the last item into the next row, why is this ??
Here is a jsfiddle :http://jsfiddle.net/htdgdhxn/
My html:
<section id="nav">
<div id="nav-wrapper">
<ul id="nav-list">
<li id="nav-home">Home
</li>
<li id="nav-clothes"><a class="category All">Clothes</a>
</li>
<li id="nav-about">About Us
</li>
<li id="nav-contact">Contact Us
</li>
</ul>
</div>
</section>
CSS:
* { margin: 0px; padding: 0px; }
#nav { background-color: #fff; }
#nav-wrapper { text-align: center; height: 74px; }
#nav-list { height: 100%; width: 480px; }
#nav-list li { display: inline-block; vertical-align: top; width: 120px; height: 100%; }
#nav-list li a { text-decoration: none; color: #000; font-size: 1.6em; display: block; height: 100%; line-height: 74px; }
#nav-list li a:hover { background-color: #F0ECE1; cursor: pointer; }
I have tested and this happens in Chrome, IE and Firefox.
Remove the whitespace between each <li>
<li></li> <...space here...> <li></li>
Inline block elements create a gap between li elements.
<ul id="nav-list">
<li id="nav-home">Home
</li><li id="nav-clothes"><a class="category All">Clothes</a>
</li><li id="nav-about">About Us
</li><li id="nav-contact">Contact Us
</li>
</ul>
See fiddle
The inline-block value is incredibly useful when wanting to control margin and padding on
"inline" elements without the need to block and float them.One problem that arrises
when you use inline-block is that whitespace in HTML becomes visual space on screen.
Gross.There are a few ways to remove that space; some of them are just as gross, one is
reasonably nicer.
Solution 0: No Space Between Elements:
The only 100% solution to this issue is to not put whitespace between those elements in the HTML source code:
<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>
Solution 1: font-size: 0 on Parent
The best white-space solution is to set a font-size of 0 on the parent to the inline block
elements.
.inline-block-list { /* ul or ol with this class */
font-size: 0;
}
.inline-block-list li {
font-size: 14px; /* put the font-size back */
}
Solution 2: HTML Comments
This solution is a bit gangsta but also works. Using HTML comments as spacers between the elements works just as placing no space between elements would:
<ul>
<li>Item content</li><!--
--><li>Item content</li><!--
--><li>Item content</li>
</ul>
It might help you.
Just increase the width of your container to 500px
#nav-list { height: 100%; width: 500px; }
or remove the white spaces between consecutive li tags
or
apply display:initial in #nav-list { height: 100%; width: 480px;}
i.e #nav-list { height: 100%; width: 480px; display: initial;}
Reason:-
1. The font size of the text in the li element might be causing the problem.
You can modify it by reducing the font-size.
#nav-list li a { text-decoration: none; color: #000; font-size: 1.2em; display: block; height: 100%;line-height: 74px; }
Instead of using this
#nav-list li { display: inline-block; }
You can do like this:-
#nav-list li { display: inline; font-weight:bold;}
Please let me know if this helps.
I'm trying to hide the overflow text of li and my li looks like this
<li class="food_item">
<a href="#" class="food_name" title="test">
testtesttesttesttesttesttesttesttest
</a>
<span>(12)</span>
</li>
<li class="food_item">
a short one
<span>(12)</span>
</li>
and my css
.food_category>.food_item {
width: 25%;
float: left;
line-height: 30px;
}
.food_category .food_name {
font-size: 14px;
margin: 0px 4px 0px 0px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
width: 80%;
display: inline-block;
}
food_category is the class name of the ul tag, now the effect is below:
the span and the a tag are not in the same line, I assume it's about the inline-block property of the a, but if I remove that, the text-overflow will not work and the overflow text will not be hidden. I'm stuck here, can anybody help me? how can I make the a and span show in the same line while keeping overflow text hidden?
Update
this is the jsfiddle link, btw,I didn't set the css of span. What I want is to make the span text right behind the a tag like this testest... (12).Thx!
In regards to your update, you need to set the anchor tag and span tag to be vertically aligned at the top of the list element. Add the following to your CSS:
.food_item a,
.food_item span {
vertical-align: top;
}
This produces the desired behavior.
DEMO
You can do something like:
.food_item span {
display: inline-block;
float:left;
}
and add float:left; to .food_item .food_name
.food_item .food_name {
font-size: 14px;
margin: 0px 4px 0px 0px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
width: 60%;
display: inline-block;
float:left;
}
FIDDLE
You may need to update the margin/padding for the spacing of the span.
I would also recommend adding something like clearfix on each li element to prevent float issues:
<li class="food_item clearfix">
...
</li>
<li class="food_item clearfix">
...
</li>
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
How to grow the li elements in the way, that all the four li elements consume the complete 900 pixels space and add a little gap between the elements. And why is there already a gap now - I have none defined?
<html><head><title></title></head>
<style type="text/css">
#box { width: 900px; border: solid 1px black; }
#menu {
display: block;
position: relative;
width: 900px;
margin: 0;
padding: 0;
text-align: center;
}
#menu li {
display: inline;
position: relative;
margin: 0;
padding: 0;
}
#menu li a, #menu li a:visited {
display: inline-block;
position: relative;
padding: 10px;
background-color: yellow;
text-decoration: none;
}
#menu li a:hover, #menu li a:active {
background-color: green;
text-decoration: none;
color: white;
}
</style>
<body>
<div id="box">
<ul id="menu">
<li>Mozilla Firefox & Thunderbird</li>
<li>OpenOffice</li>
<li>Microsoft Office Visio</li>
<li>Apache OpenOffice 3.0.0</li>
</ul>
</div>
</body>
</html>
Inline blocks behave weirdly in the fact that they render whitespace. The gap shown between items is the new line characters in your code. You can either remove the new line characters as I have shown in the code below (or at this fiddle http://jsfiddle.net/UyQEK/). If you want to keep the HTML clean, and not have to do this removal of whitespace, use float left on the elements instead of display: inline-block and do a clearfix on the parent to set the height.
<div id="box">
<ul id="menu">
<li>Mozilla Firefox & Thunderbird</li><li>OpenOffice</li><li>Microsoft Office Visio</li><li>Apache OpenOffice 3.0.0</li>
</ul>
</div>
EDIT
Made the classic mistake of forgetting to check to ensure I answered the whole question. I have updated the fiddle http://jsfiddle.net/UyQEK/1/ to show the actual answer to utilize the entire bar rather then just get rid of your spaces. The basis of the solution was floating the elements and giving them each a width of 25% and applying a clearfix to the ul element.
Hope that solves the whole thing this time.
I am using the following (simplified) code to vertically center a hyperlink within a UL. I know it may appear strange that I am applying the style to the hyperink rather than the li, but I require the entire list element to be clickable.
My code works just as intended, however as you can see on this jsFiddle the vertical centering is a little off.
Can anyone advise why this is? Thanks in advance.
HTML
<ul>
<li>
<a href="/">
<label>Foo</label>
<span>Bar</span>
</a>
</li>
</ul>
CSS
ul
{
list-style: none;
}
ul
{
height: 100px;
line-height: 100px;
}
li, li a
{
display: inline-block;
}
li a
{
line-height: 18px;
padding: 5px 10px;
color: #FFF;
text-decoration: none;
}
li label
{
float: left;
}
li span
{
float: right;
}
The line-height on your "ul" is whats moving the link up and down, if you increase it to about 120px it centers it.
Get rid of display:inline-block; on li a.
Demo
I would like to do this so that the clickable region on the tag is size of the LI.
My html looks like:
<li>
Link
</li>
As others have said
li a { display: block; }
should achieve what you're after. But you must also remove any padding from the <li> and set it on the <a> instead. For example:
li { padding: 0; }
li a { display: block; padding: 1em; }
In CSS:
li a {
display: block;
}
Of course, you'll want to make your selector more specific than that.
<ul>
<li class="myClass">
Link
</li>
</ul>
li.myClass a {
display: block;
background-color: #fdd; /* Demo only */
}
http://jsfiddle.net/userdude/jmj2k/
This will make the entire area clickable.
li a { display: block; }
Try this css
li{
border:1px solid black;
height:40px;
}
li a{
border:1px solid red;
display:block;
height:100%;
}
li a{
display: inline-table;
height:95%;
width: 95%;
}
the 95 to anticipate any li margin or padding
If you currently have this same question you can simply add padding to the right place:
li {
//remove any padding or margin attributes from here
}
li a {
display: block;
padding: 20px; //or however big you want the clickable area to be
}
Anchor tags are by default inline elements, so you have to explicitly change them to display as block elements before you can mess with the padding or the margins.
Hope this helps!
Just another option I used is create a transparent png image in photoshop and put it inside the anchor tag, make its position absolute and increase its dimensions to fit that parent div you want and you could have a large clickable area.
<a href="test.html" />
<img id="cover_img" src="cover.png" />
</a>
#cover_img {
display: block;
height: 200px;
width: 193px;
position: absolute;
}
Might be useful in certain circumstances.