I am trying to align horizontally a list containing radio buttons within a div.
The example can be seen at the following address
http://shopper.webresponsive.co.uk/index.php/blinds/roman-blinds/mairo-mademoiselle-fabric-white-blue.html
I have tried to add to the css the following but no luck:
.options-list ul li {
display: inline-block;
}
Can anyone point me in the right direction?
Thanks
This should be what you're looking for:
.options-list li {
display: inline-block;
margin-right: 16px;
}
The element with the class of options-list is itself a ul, so you don't want to include ul in your selector.
Related
No idea why but I cant find the CSS to bring my submenu items together on the navigation. I am attempting to make the sub-menu navigation horizontal as well but they are really stretched out. Any help would be appreciated! Thanks
http://palmcasualpvc.com/cushion-sets
The submenu spacing is being inherited by the main menu styling. There is a margin-right rule causing this. You can start with this:
.main-navigation li {
margin: 0;
}
There is also a width being set to the items in the submenu. Try this:
.main-navigation li ul li a {
width: inherit;
}
In your CSS class .main-navigation ul ul remove width: 900px and add background-color: Yellow; to .main-navigation li li
I am having some trouble getting this menu centered.
I tried text-align:center; on the <ul> and margin:auto;.
I'm not sure if I have to float anything, or change the display setting
JSFiddle: http://jsfiddle.net/FQ3mK/
First method: center the container <div> by using text-align:center:
#navcontainer {
text-align: center;
}
Live demo: jsFiddle
Second method: give a fixed width to the container <div> and use margin:auto:
#navcontainer {
width: 600px;
margin: auto;
}
Live demo: jsFiddle
margin:auto works only if you give the container (the <ul) a fixed width.
see: http://jsfiddle.net/FQ3mK/3/
I too was looking into this. I found the best answer here: https://stackoverflow.com/a/17634702/2537445
I think it's the best because it is the most dynamic, cross-browser compatible answer.
As to your particular anchors, you wouldn't be able to use display: block on them.
However, you can apply padding to the left and right of an inline anchor, and padding to the top and bottom of an inline li to give the spacing you need.
#cssmenu ul {
text-align:center;
}
#cssmenu ul li {
display: inline;
}
Maybe you can help....
I have this unordered list and it does not look right and my css power is limited:)
The border of the ul element does not wrap the entire list.
Please take a look at it's fiddle:
Ty!
Try adding
ul {
overflow:auto;
}
or just overflow:auto; to your existing #lo style.
from the style #lo li
remove float: left;
and add:
display: inline-block;
In my dropdown menu some of the text within the LI's is wrapping to a new line.
I want all of them to be 1 line.
I have tried:
ul ul li {width:100%;}
which doesn't work.
The image below shows what I am faced with.
li {
white-space: nowrap;
}
This should stop the wrapping of the text within the li
Place this on your dropdowns ("Tech Consulting"):
{
height: auto;
}
In the case of the issue here, place height: auto; on the dropdowns (ul li ul li).
I am going to guess that your CSS sets a height to the ul li a ("Small Business"). This places the text outside of the defined height.
I have a navigation with the following html code:
<ul id="nav">
<li><a>home</a></li>
<li><a>login</a></li>
<li class="selected"><a>shop</a></li>
<li><a>help</a></li>
</ul>
What I want to accomplish is that the element with the "selected" class always appears at the left side of the navigation.
So if shop is selected the rendered navigation would look like:
shop home login help
If help is selected:
help home login shop
My css:
#nav li {
display: inline; }
#nav li.selected {
width: 230px;
text-align: center;
background: #b52830;
margin-right: 10px;
float: left;
display: block; }
#nav li.selected a {
display: block;
padding-right: 0; }
#nav li.selected a:hover {
color: #fff; }
It works for certain browser but not for all. Any ideas?
If it does not work the selected element moves beneath the rest...
shop selected:
home login help
shop
Another alternative would be to use a programming language (like php or javascript) to print the list of links in order with class "selected" at the top of the list.
Floating left will put the first ordered li furthest to the left on the same line as the other li elements. Inversely, floating right will put the first ordered li furthest to the right.
How are you applying class "selected" to the appropriate li?
If ul#nav always have fixed width you could tell .selected to float left and all other elements to float right.
I would try to avoid to combine inline and block display like this. It would be helpful if you write how does look like if it not works.