I have list menu
<ul>
<li>item1</li>
<li>item2</li>
<li>longitem3</li>
</ul>
menu css
ul{
width:500px;
}
li {
float:left;
}
i would like to automatically distribute my items in menu so they would have the same space between them like this
{menu}{item}{space}{item}{space}{item}{menu}
is it possible to do this using only html and css, not javascript? Thanks
I would use a css class rather than affecting all the < li>, like this:
<li class="menuItem">
As for the css:
.menuItem {
float: left;
margin-right: <some number of px>;
}
.menuItem:last-child {
margin-right: 0;
}
The ':last-child' selector overrides the previous definition and removes the right space for the last menu item.
You can add a margin to the right side of your li's
li { float:left; margin-right: 5px}
Just add some padding to the right of each li item, e.g.
li {
float:left;
padding-right:20px;
}
ul {
text-align: center;
}
li {
display: inline-block;
}
Related
I have a list that displays numbers with decimals. I want them all aligned in the center but they have different decimal lengths so it's kinda causing some UI issues.
Example its current displaying something like
14.88
18.123
20.452
10.22
3.1
Its current HTML & CSS is simply
.my-list {
text-align: center
}
<ul class="my-list">
<li>14.88</li>
</ul>
Can anyone show me how to update my CSS so it displays something like this
14.88
18.123
20.452
etc
In short I want the list to be aligned on the center, but I want the list items to be aligned on the left.
Assuming you want the list itself centered with the items left aligned:
Option 1: Using the list as a block but a fixed width
ul {
padding: 10px;
list-style-type: none;
background-color:#ccc;
width: 25%;
/*Centers the list*/
margin: 0 auto;
}
/*Not required in my example, but you may need it*/
li
{
text-align:left;
}
<ul>
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
Option 2: Wrap the list in a div and set the list to inline-block
div {
/*Centers this list*/
text-align: center
}
ul {
padding: 10px;
list-style-type: none;
background-color: #ccc;
display: inline-block;
/*Left align contents of list*/
text-align: left;
}
<div>
<ul>
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
</div>
See this article for more centering options: https://css-tricks.com/centering-css-complete-guide/
You are using text-align:center.
Try the same with:
.my-list {
text-align: left
}
This should do it.
You can try list-style css property for the same, to remove the bullets
.myList{
text-align:left;
list-style:none;
}
.mylist{
list-style:none;
width:100px;
}
.mylist li{
text-align:center;
}
<!DOCTYPE html>
<html>
<body>
<ul class="mylist">
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
</body>
</html>
I have a menu with multiple listitems in it:
JS Fiddle
My goal is to align the listitems dinamically, also when it breaks on two or more lines.
So something like the center button in word. When i do text-aling on the <li> elements it just aligns it in the <li> itself. when I do margin: 0 auto on the <li> it breaks on like 8 rows.
It should somethink like:
Is there any way to achieve that?
Use Parent Styles as
{
display:flex;
flex-wrap:wrap;
justify-content:center;
}
Here;s an updated fiddle. https://jsfiddle.net/bw5jw92L/1/
You need to add text-align:center to the containing UL, and also remove the float from the LI's and add a display:inline-block.
Here are the changes:
.TopMenuBlock .topCMSListMenuUL {
font-size: 18px;
margin: 0;
font-weight: 600px;
padding: 0;
list-style: none;
padding-top: 115px;
margin: 0 auto;
width: 68%;
text-align:center;
}
.topCMSListMenuLI, .topCMSListMenuHighlightedLI, .topCMSListMenuLILast, .topCMSListMenuHighlightedLILast {
position: relative;
display:inline-block;
}
As others have mentioned, you can set the li to display:inline;, or float the li left or right. Additionally, you can also use display:flex; on the ul. In the snippet below I also added justify-content:space-around to give it more spacing.
For more information on flexbox, checkout this complete guide.
#div_top_hypers {
background-color:#eeeeee;
display:inline;
}
#ul_top_hypers {
display: flex;
justify-content:space-around;
list-style-type:none;
}
<div id="div_top_hypers">
<ul id="ul_top_hypers">
<li>‣ Inbox</li>
<li>‣ Compose</li>
<li>‣ Reports</li>
<li>‣ Preferences</li>
<li>‣ logout</li>
</ul>
</div>
I am trying to make the menu links (under Menu) on the following website fill the full width of the bar. So when you have "Soup & Salad" as active, it extends all the way to the left of the blue bar. There should also be no space between blocks when you hover over the link next to the active state.
http://www.woodonwellington.com/
ul#menuNav
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
background-color: #0c0648;
padding-top: 13px;
padding-bottom: 12px;
}
#menuNav li
{
display: inline;
list-style-type: none;
}
#menuNav a {
padding-top: 13px;
padding-bottom: 13px;
padding-left: 20px;
padding-right: 20px;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
color: #fff;
cursor: pointer;
}
It happens because your li is set to display:inline; In your code you have an enter and a couple of spaces/tabs between the <li></li> blocks. To fix this you have to write the tags right after eachother. You want to limit the space between those <li> tags.
In stead of this:
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
Do this:
<ul>
<li>
Content
</li><li>
Content
</li><li>
Content
</li>
</ul>
Answer on comment:
The same problem appeared on the link itself. As you can see on the image below you made the li elements touch eachother.
Now to make the links touch eachother you have to do the same.
Instead of:
<li>
<a>Link</a>
<li>
Do this:
<li><a>
Link
</a><li>
It is not a nice solution but it will fix your spacing between the links.
you could use display:table/table-cell to acomplish this:
basic CSS to apply:
#menuNav {
display:table;
width:100%;
border-collapse:collapse;
}
#menuNav li{
display:table-cell;
}
#menuNav li a {
display:block;
text-align:center;
}
remove any floats from CSS to test this. float kills display (unlesss set to flex, but this is another option)
You can simply remove the display: inline; in your .css and add float:left;
#menuNav li
{
list-style-type: none;
background-color:red;
float:left;
}
This will remove all the spaces.
Check this
http://jsfiddle.net/BishanMeddegoda/30w56oft/
i have some css to align two parts of a list item to the left and right side like so :-
ul li div.left {
float:left;
}
ul li {
text-align:right;
}
<ul>
<li><div class="left">On the left</div>On the right</li>
</ul>
Is it possible to extend the above to add one more part that aligns to the bottom left below the left and right parts?
i have tried :-
<li><div class="left">On the left</div>On the right<p><div class="left">At the bottom<div></p></li>
but it doesnt render correctly
You will need to modify your HTML structure like I've done below and then style accordingly to create the sort of a layout which you want.
Here's a working demo:
ul {
padding: 0px;
}
ul li {
list-style-type: none;
}
ul li.left {
float: left;
}
ul li.right {
float: right;
}
ul li.center {
text-align: center;
}
.block {
overflow: hidden;
}
<ul>
<div class="block">
<li class="left">On the left</li>
<li class="right">On the right</li>
</div>
<li class="center">centered underneath</li>
</ul>
I'm making a site for my friend and I wonder if I could put two html <li> elements next to the each other? I've got a jsfiddle here.
Try:
li{display:inline-block;}
or
li{float:left;}
You may set their display to inline or inline-block. OR You may float them left.
Replace
<ul>
<li class="main">Home</li>
<li class="main">Dropdown Goes Here
<ul>
Dropdown content goes here
</ul>
</li>
</ul>
add this to style
.main{
display:inline;
}
Assuming you need it for nav, first, give body width:100%;
body {
text-decoration:none;
background:#EBEBEB;
font-family:Calibri;
width:100%;
}
nav {
width:100%; /* this will set nav full width of conatiner*/
}
nav > ul >li {
display:inline-block;
width:50%; /* this will put 2 in one row*/
}
use float for your elements, like this:
li{
float: left; /* or right */
}
None of the above worked. These do. Either:
If using Bootstrap 4, use:
<ul class="list-group">
Or:
<ul class="OnePerLine">
.OnePerLine {
flex-direction: column;
}
try using this :
li {
display: inline-flex;
float: left;
width: 100%;
}
Use the float property, like:
li{
float: left;
}
or
li{
float: right;
}