I have a side menu on a website. It's inside a floated container named #left_menu, which contains the ul with li elements.
The problem is, I would like the li elements to have their own generated width instead of inheriting it from #left_menu, which they seem to do.
They have to be text-aligned to the right and only as wide as they need to be.
HTML
<div class="left_menu">
<ul>
<li>Derp</li>
<li>Derp</li>
<li>Derp</li>
<li>Derp</li>
</ul>
</div>
CSS
.left_menu{
float: left;
width: 300px;
margin-left: 20px;
line-height: 30px;
padding-top: 3px;
}
.left_menu > ul li{
color: #4c4c4c;
text-align: right;
font-size: 12px;
display: block;
padding: 5px;
}
.left_menu li:hover{
color: white;
background-color: #0072ff;
border-radius: 5px;
}
JSFiddle here.
Float left and then clear left and you should get what (I think) you're looking for:
.left_menu > ul li{
color: #4c4c4c;
text-align: right;
font-size: 12px;
display: block;
padding: 5px;
float:left;
clear:left;
}
JSFiddle
Or float:right and clear:right, depending on which side you are looking to align the buttons.
JSFiddle
Just float your ul left:
.left_menu > ul{
float: left;
}
http://jsfiddle.net/mUP7n/4/
Related
I'm trying to use a horizontal list in a web part in SharePoint. I've gone over this code over and over and can't find the issue. For some reason, the list still displays vertically. Any ideas?
CSS
ul{
padding: 0;
list-style: none;
width:100%;
text-align:center;
height: 100px;
background: #ffffff no-repeat center;
}
ul li{
display:inline-block;
float: left; padding: 25px 25px 0 125px;
margin: 0;
position: relative;
font-size: 25px; font-weight: bold; color: #FFFFFF;
text-align: center;
}
ul li a{
display: block;
color: #FFF; padding: 10px 5px;
text-decoration: none;
}
ul li a:hover{
}
ul li ul.dropdown{
min-width: 150px; /* Set width of the dropdown */
width: 100%;
display: none;
position: absolute;
z-index: 999;
left: 0;
float: left;
}
ul li:hover ul.dropdown{
display: inline; /* Display the dropdown */
background: #FFFFFF;
left: 0;
width:100%;
margin:0;
padding:0;
}
ul li ul.dropdown li{
display: inline;
float: left;
background: #FFFFFF;
}
HTML List (still in progress; just testing before I fix all the text/links)
<ul>
<li>Home</li>
<li>About</li>
<li>
Current Performance ▾
<ul class="dropdown">
<li>Grafenwoehr</li>
<li>Hohenfels</li>
<li>Katterbach</li>
<li>Stuttgart</li>
<li>Vilseck</li>
</ul>
</li>
<li>Contact</li>
</ul>
I haven't done this stuff in years but my boss wants me to try and make this work. -_-
You have a dropdown here
ul li ul.dropdown {
width: 100%;
}
which has a 100% width relative to
ul li {
position: relative;
}
which is the culprit here. Removing the "Position:relative" above fixes your problem.
Your ul.dropdown does float horizontally, but its width forces the elements to order vertically. To test this out you can set its min-width to something like 900px: DEMO
As your ul.dropdown is a child of its parent li, which is set to display: inline-block; position: relative;, its bound to its borders using width: 100%.
To solve this problem you can remove position: relative of your li elements to remove this border. Now its width: 100% relates to your body.
WORKING DEMO
Try display:block on the UL.dropdown and display:inline-block on the UL.dropdown LI.
just remove (position: relative;) from "ul li" list will come horizontally.
code will be like:
ul li{
display:inline-block;
float: left;
padding: 25px 25px 0 125px;
margin: 0;
font-size: 25px;
font-weight: bold; color: #FFFFFF;
text-align: center;
}
just replace this code with yours.
Thank You
I've been using the following HTML and CSS code for a nav menu on the left for the better part of a year without problems - except that not the display: block functionality doesn't work on ul li a. The text gets pushed down a line, with only the before arrows remaining in place, no matter what I do.
On ul li it's no problem, but it would be more practical to have the link itself extend throughout a block.
Anyone an idea as to the solution?
HTML:
<div class="navmenu_left_wrapper">
<nav>
<div class="navmenu_left">
<ul>
<li>Front page</li>
<li>Introduction</li>
</ul>
</div>
</nav>
</div>
CSS:
.navmenu_left_wrapper {
padding-bottom: 1px;
background-color: #DDD;
text-align: left;
overflow: visible;
width: 145px;
text-align: left;
}
.navmenu_left {
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
font-size: 12px;
font-family: 'oswald-regular', 'Times New Roman';
border: 1px dotted #000;
}
.navmenu_left ul {
margin: 0;
padding: 0;
display: block;
}
.navmenu_left ul li:before {
content: "\00BB \0020";
padding-right: 2px;
}
.navmenu_left ul li {
position: relative;
margin: 0;
padding-left: 4px;
list-style: none;
background: #F2F2F2;
text-align: left;
text-decoration: none;
height: 18px;
}
.navmenu_left ul li:hover {
background: #CCCCFF;
}
.navmenu_left ul li a {
color: #000;
width: 135px;
display: block; /* <----- Doesn't work. Text to next line, underneath "before" arrow. -------- */
}
I think you want display: inline-block as others have stated in the comments. The problem is your a is too wide at 135px and is overflowing the container. The whitespace will cause it to wrap by default.
You can either reduce the width of the a or add white-space: nowrap; to the .navmenu_left ul li CSS
white-space property - https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
fiddle - http://jsfiddle.net/msj5wcgw/3/
You can even set it to show ellipsis if it overflows via overflow: ellipsis
If you want the >> to be clickable, you can add this hack to .navmenu_left ul li a:
padding-left: 1rem;
margin-left: -1rem;
Problem solved. It was a combination of two settings:
.navmenu_left ul li a {
color: #000;
width: 128px; /* ">>" symbol is not part of the overall width of the <li> element. */
display: inline-block; /* that explains also why `inline-block` is needed and not just `block`.
}
I'm trying to justify variable number of li elements, to fill the width of a ul block with equal spacing between them. It would be important to have minimal distance between the elements.
I tried various solutions from StackOverflow answers, for example https://stackoverflow.com/a/10020586/3897243, but none of them worked out for me.
HTML:
<ul class="clearfix">
<li>Covenantal
</li>
<li>Inyoite
</li>
<li>Myopical
</li>
<li>Funiculate
</li>
<li>Uncompromisingness
</li>
</ul>
CSS:
li {
float: left;
list-style: none;
font-size: 20px;
line-height: 1.5;
display: inline-block;
}
ul::after {
width: 100%;
display: inline-block;
content: ".";
visibility: hidden
}
li {
display: inline-block
}
https://jsfiddle.net/r1mw5j9h/
Using display:table; width:100%; on your wrapping <ul> and display:table-cell; text-align:center; on the <li> will ensure that all elements will fit side by side using the minimum available width and will split the available padding evenly when there is more space to give.
See your updated fiddle here: https://jsfiddle.net/r1mw5j9h/2/
if you want space between each elements then try setting
li {
float: left;
list-style: none;
background-color: #aaa;
font-size: 20px;
line-height: 1.5;
padding:5px; // try adding padding
}
padding property will give you space between elements.
is that what you want?
ul, li {
padding: 0;
margin: 0;
}
ul {
background-color: #888;
text-align: center;
}
ul > li {
display: inline-block;
vertical-align: middle;
list-style: none;
background-color: #aaa;
font-size: 20px;
line-height: 1.5;
}
ul > li a{
display: block;
color: #fff;
text-decoration: none;
padding: 0 15px;
border: 1px solid #000;
}
<ul>
<li>Covenantal
<li>Inyoite
<li>Unpollutable
<li>Bibliopolical
<li>Vibrato
<li>Myopical
<li>Funiculate
<li>Indesignate
<li>Uncompromisingness
</ul>
There is this rule "when you do a line-height equal to your parent element's height - you center the text." Right ? And it works for letters LT and EN in my code. I set the height of ul 40px and line-height of li to 40px. And everything is beautiful.
But it doesnt work with border right. I need it to be as a 17px seperator between languages buttons in the center, but currently it is on top like so : http://jsfiddle.net/TomasRR/nxf5ey2a/
<ul class="lang">
<li class="lt">
LT
</li>
<li class="en">
EN
</li>
</ul>
CSS:
ul.lang {
float: left;
height: 40px;
list-style:none;
}
ul.lang li {
float: left;
line-height: 40px;
}
ul.lang li:first-child {
height: 17px;
line-height: 40px;
padding-right: 6px;
border-right: 1px solid black;
}
ul.lang li:last-child {
padding-left: 6px;
}
ul.lang li a{
text-decoration: none;
font-size: 12px;
color: black;
}
line-height should be set to ul and reset to normal to li.
For li to follow line-height, they must: not float and be formatted as an inline boxe (either inline-block or inline-table) wich triggers a proper layout.
DEMO
ul.lang {
float: left;
height: 40px;
list-style:none;
background:orange;
line-height: 40px;
padding:0 5px
}
ul.lang li {
display:inline-block;/*no float*/
vertical-align:middle;/* align from baseline/line-height of parent or highest box aside */
line-height:1.2em;/* reset line-height to regular value */
}
ul.lang li:first-child {
padding-right: 6px;
border-right: 1px solid black;
}
ul.lang li:last-child {
padding-left: 6px;
}
ul.lang li a {
text-decoration: none;
font-size: 12px;
color: black;
}
The vertical-alignment only works on inline elements.
Therefor, don't float the list-items, instead display them inline:
ul.lang li {
display: inline;
line-height: 40px;
}
Updated Fiddle
Add the padding and the border to the <a>, it should work:
ul.lang li:first-child a {
padding-right: 6px;
border-right: 1px solid black;
}
ul.lang li:first-child {
height: 17px;
}
How about you change that to the correct 40px if you want it to exactly fit inside its 40px high parent?
That fixes it.
Use
display:inline
property in place of
float:left
See this demo - http://jsfiddle.net/unicode/g846u1nv/
I'm trying to add space between a bottom border line and my <li> item but no luck.
My code:
<div class="menuwrap">
<div class="menu">
<ul>
<li>Home
</li>
<li>Query
</li>
<li>Reports
</li>
</ul>
</div>
</div>
CSS styles:
.menu {
color: #000;
background: #FFF;
}
.menu ul {
list-style: none;
display: inline;
float: left;
padding-left: 40px;
margin-top: 90px;
}
.menu li {
float:left;
margin-left:10px;
}
.menu li a:hover {
padding: 0 10px 0 10px;
font-size: xx-large;
border-bottom: 1px solid white;
border-spacing: 20px;
}
.menu li a {
text-decoration: none;
color: #000;
font-weight: bold;
font-size: large;
}
.menuwrap {
overflow:hidden;
}
I tried couple of different things, but nothing worked so far. border-spacing is not doing what I want. I tried padding-bottom and that also didn't work. Can someone tell me how to achieve that? I want a space between the "li" item and its border-bottom.
Adding a padding-bottom or margin-bottom seems to be working.
li:hover{
padding-bottom: 10px;
}
Here's a FIDDLE
or
li:hover{
margin-bottom: 10px;
}
Here's a FIDDLE
Update: After reading your comment and having a look at the fiddle you provided, I've created one which does what you are trying to do. It's different from the code you provided but it's easier to read and you can modify it according to your needs
.menu{
list-style-type: none;
}
.menu li{
display: inline-block;
*display: inline;
zoom: 1;
margin: 10px;
}
.menu li a{
text-decoration: none;
color: #000;
border-bottom: 2px solid #000;
padding-bottom: 30px;
}
.menu li a:hover{
font-size: 2em;
font-weight: bold;
}
FIDDLE
I guess you didn't give your styles. padding-bottom works. Please check http://jsfiddle.net/VZCrq/8/