Is there any reason to use float:left instead of float:none in a list that I want to just have displayed normally? I ask because when I do float:left, the entire left nudges up a bit too much:
If I do float:none, it looks fine:
I'm curious if there is any other gotcha in using it though.
EDIT: Sorry, I've included an example here:
http://jsfiddle.net/remkrupe/
Note: if I change ul to be display:inline instead of inline-block, it also behaves the way I want (but this interferes with something else in my code). But the example above you'll see the elements in the "what_i_want" class all lined up next to each other, while the other ones "jump up" (while still lined up with respect to each other).
you can leave ul elements as display:block you just need to pay attention to resetting padding and margin property
.want
{
margin:0;
padding:0;
display:block
}
.want>ul, .want li{
margin:0; margin:0;
}
.want ul li{
float:left;
}
fiddle (in the fiddle check for want class)
Related
I have removed small dots in ul > li by css style:
li{list-style:none;}
But there are some small dot in <li>tag now. How can I remove them. I have searched a lot and used li,ul{display:block; list-style:none; list-style-type:none; .....} too. But nothing worked. Inspecting elements was not helpful. Would you please help me remove these blue small dots?
You are using correct css but you have applied it on li tag, It should be on ul tag.
Use following css:
ul{list-style:none;}
You can remove bullets by setting the list-style-type to none on the CSS for the element, for example
ul
{
list-style-type: none;
}
You might also want to add padding:0; margin:0; to that, if you want to remove indentation as well.
See Listutorial for a great walkthrough of list formatting techniques.
Remove it by making it a link(a tag) and then disable the link if don't want it.Maybe an indirect way would help
What I want to do is break up the inline-block <li>s. The code is generated and I have no access to it before it is written to the page. Because the <li> elements have no white space between them, they are not split and won't justify across the page.
I don't mind if the solution is CSS or Javascript based.
I have tried various things in CSS 'content:' and 'after:'.
Please see this fiddle for a demo of the problem: http://jsfiddle.net/2L56N/5/
Edit: The result should like the top example. However, the generated code is like in the bottom example (no space between the tags, causing the inline-block to become one). Drag the width over so only 2 images show to see the justify effect I am looking for.
Unless I'm misunderstanding the question, you can simply add margins to the li elements like so:
ul li {
display: inline-block;
margin:5px;
}
http://jsfiddle.net/B7cL9/
You can use display:flex; with justify-content:space-between; to simulate your text-align:justify when white space are missing in between your inline boxes this will only work for younger browsers
:
ul {
display:flex;
justify-content:space-between;
text-align: justify;/* your code */
}
ul li {
display: inline-block;/* your code */
}
DEMO
I am making a mobile webapp with JQuery Mobile. Now at the bottom I have some kind of a navigation menu. Here is the HTML
<ul data-role="listview">
<li data-icon="arrow-u">Top</li>
<li>Menu</li>
<li>Contacten</li>
<li>Klanten</li>
<li>Planning</li>
</ul>
Now I want the first listItem at the right side. So I made a css class 'top'
.top{
text-align:right;
padding-right:35px;
}
But for some reason it doesn't take this CSS class. Can anybody help ?
Try such:
ul li a.top{
text-align:right;
padding-right:35px;
}
OR such:
ul li:first-of-type a{
text-align:right;
padding-right:35px;
}
You are applying the top class to the a intead of the li.
Update
As your styling gets overridden, you need to increase the CSS-specificity of your selector until it is higher than the specificity of the rule that overrides it. As I don't know much of your DOM, the best I can give you is:
ul li.top{
text-align:right;
padding-right:35px;
}
But that might not be enought. Look through the article on CSS-specificity, there is a part on how to calculate specificity.
I've discovered that in certain cases overrides are a bit tricky. You may have to do something like this. Some browsers mobile & web are not picking up the overrides as I would have expected. End result I have to use important to make sure my style gets applied. Just be careful of how use this and where.
ul li.top{
text-align:right !important;
padding-right:35px !important;
}
I'm new to the html & css design. I have following design of css-
span.menu a:link, span.menu a:visited
{
display:block;
font-weight:bold;
color:#0000CC;
background-color:#E8EEFD;
text-align:center;
padding:4px;
text-decoration:none;
width:70px;
padding:5px;
border:5px solid gray;
margin:0px;
}
I want to place three link by using tag which should be shown in the following manner-
Calls Customers Venders
and i want to treat them as menu for this they should be placed in horizontal manner. But when i'm running my css design then they placed in the vertical manner like -
calls
customers
vendors
how to do this?
thanks.
Try using display:inline-block if you want to be able to set the width and have them inline.
This won't work with Internet Explorer 6, an alternative would be using float:left. However, this can have complications as the elements will be removed from the normal flow and if there is no other content in the parent element then its height would be reduced to 0. This could be overcome by adding overflow:auto to the parent
Instead of display: block use float: left.
add the css properties float:left
My link is here:
Example Page
I'm using list-style-image: to give my horizontal lists ( very top and bottom ) seperators. I have a class of .first to remove the image from the first li in each list.
Lo and behold in IE6, it doesn't work. What happens is that the bullet images are not being displayed, and also the bottom few pixels of the text appears to be cropped.
Screenshot
I've fixed a few 'haslayout' bugs with this page, but I have a feeling its something to do with my rule hierarchy, although no amount of hacking about seems to work for me.
Can someone shed some light on this perhaps? Thanks.
Also, my colour change works on hover, but not the underline, in the same selector?
EDIT OK, I have used the background image technique that yoavf suggests, which seems to do the trick, but the cropping issue still remains. Looks like a separate issue then...
heres my revised CSS
#site-navigation li {
background-image:url(../img/site-nav-seperator.gif);
background-position:0 4px;
background-repeat:no-repeat;
float:left;
padding-left:15px;
}
#site-navigation li.first {
background-image:none;
}
further edit:
Managed to fix the cropping too, by giving the a tag some line-height.
#site-navigation a {
color:#666666;
display: block;
text-decoration:none;
margin-right: 1em;
line-height: 1.1em;
}
this bit feels like a bodge though :)
I know this isn't really a solution, but I would recommend using background-image instead of list-style image.
You'll achive the same effect, and it will work in all browsers.
Looks like a problem with margins and paddings of your objects inside site-navigation.
If you showed your CSS for those elements, we could check it faster :)