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;
}
Related
Right now this displays as: text 1 2 3 4 with the list appearing horizontally inline with the text. Is there a way to make the list display vertically while still remaining inline with the text? (instead of text 1 2 3 4, the 2 should appear below the 1, 3 below the two, etc. but the list will still appear to the right of "text" and in the same line as "text")
Any help is appreciated. Thanks!
HTML
<div id = "text">text</div>
<ul id="ulist">
<li id="contents">1</li>
<li id="contents">2</li>
<li id="contents">3</li>
<li id="contents">4</li>
</ul>
CSS
#ulist {
display: inline-block;
margin: 0;
padding: 0;
}
#contents {
display: inline-block;
}
#text {
display: inline;
}
#text2 {
display: inline;
}
Sure, get rid of your rules and just float the div to the left:
#text {
float:left;
}
Note that IDs must be unique.
jsFiddle example
Add display:block; to your li elements, modify #text to display:inline-block and vertical-align: top, and that should cause them to stack.
#ulist {
display: inline-block;
margin: 0;
padding: 0;
}
#ulist li {
display: block;
}
#contents {
display: inline-block;
}
#text {
display:inline-block;
vertical-align:top;
}
#text2 {
display: inline;
}
I want to have the phone number and email address vertically align with the little icons next to them. I'm trying to change their line-height, but that changes the line height of all the li's in that area. I think that is because they are inline. Here is the site and the css.
LINK: www.matthewtbrown.com/newsite
HTML:
<ul class="contact">
<li><img src="http://s7.postimg.org/64ux9a1if/email.png"></li>
<li class="contacttext">mbrown74#rocketmail.com</li>
<li><img src="http://s7.postimg.org/g0w08x7af/phone.png"></li>
<li class="contacttext">978-761-1205</li>
</ul>
CSS:
.contact {
color: #fff;
text-align: center;
float:none;
}
.contact > li {
display: inline;
}
.contacttext {
font-size: 19px;
padding-left: 5px;
}
That's where vertical-align comes into play which aligns inline elements to each other:
In your case the following should work:
.contacttext{
vertical-align:text-top;
}
Also note, that if you want to have your li contain the img properly, it needs a display-type other than the default inline - inline-block might be suited most.
Try something like this:
li {
display: inline;
vertical-align: top;
line-height: 25px;
}
after this i have this result:
try this
<ul class="contact">
<li class="contacttext">
<img src="http://s7.postimg.org/64ux9a1if/email.png">mbrown74#rocketmail.com
</li>
<li class="contacttext">
<img src="http://s7.postimg.org/g0w08x7af/phone.png">978-761-1205
</li>
I just kept the icons and the text in the same li's
I got it. I did:
.contacttext {
font-size: 19px;
padding-left: 5px;
display:inline-block;
vertical-align:middle;
}
You could add margin-bottom to your <img> to solve this issue.
li img {
margin-bottom: 3px;
}
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/
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.
I am trying to create a very simple "no-frills" tab using html & css. For this, I have a bunch of li elements and inside each of these, there is a "a href" element. Now, when i look at the output in IE & Firefox (after setting the styles to make the list display horizontally with proper border and everything), I can see that the "a" element overflows the "li" element. How do i make the "li" element resize based on the "a" element?
CSS and html as follows
#tabs ul
{
list-style:none;
padding: 0;
margin: 0;
}
#tabs li
{
display: inline;
border: solid;
border-width: 1px 1px 1px 1px;
margin: 0 0.5em 0 0;
background-color: #3C7FAF;
}
#tabs li a
{
padding: 0 1em;
text-decoration: none;
color:White;
font-family: Calibri;
font-size: 18pt;
height: 40px;
}
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
</div>
You forgot the "#" in the CSS declarations. You've an id="tabs" in you html code which needs to be referenced as
#tabs {
....
}
in the CSS. The rest is fine-tuning ;)
And try
#tabs {
display: inline-block;
}
instead of the display: inline;
Try settings the the display on the li element as "inline-block".
http://www.quirksmode.org/css/display.html
give style to anchor as
display:block
I give
display:block
to both the li and a tags. Then float the li. You can add this code to make the li enclose the a completely:
overflow: hidden; zoom: 1; word-wrap: break-word;
This will clear anything inside.
You could also simply give your li's some padding:
#tabs li {
padding: 8px 0 0;
}
Inline-block is a good way to go (as suggested).
But if you want this to be cross-browser, you need to add som CSS-hacking "magic" :)
One very good tutorial on the subject is http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Using the method from that article, you'd end up with the following CSS:
/* cross browser inline-block hack for tabs */
/* adapted from:
/* http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */
#tabs ul,
#tabs li,
#tabs li a {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: bottom;
margin:0; padding:0; /* reset ul and li default settings */
}
/* The rest is "window dressing" (i.e. basically the tab styles from your CSS) */
#tabs li a {
margin: 0 0.5em 0 0;
background-color: #3C7FAF;
padding: 0 1em;
text-decoration: none;
color:white;
font-family: Calibri;
font-size: 18pt;
height: 40px;
}
Simply display:inline-block on both li & a did the trick for me man. Lists stretched to accommodate whatever I did with the links.