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>
Related
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'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;
}
I am trying to center my navigation links inside the div but no matter what I've tried it won't work. I've tried margin-left:auto, margin-right:auto, but nothing...
Here is the section of CSS code:
#nav {
display:block;
background-color:#505050;
height:17.5px;
box-shadow: 0px 0px 15px 5px #CCCCCC inset;
border:1px solid #EEEEEE;
border-radius:20px;
padding:1.5%;
}
#nav li {
padding:0px 20px 0px 20px;
display:inline;
/*float:left;*/
list-style:none;
position:relative;
}
#nav li a {
padding:0px 0px 20px 0px;
color:#FFFFFF;
text-decoration:none;
}
and here is my ul code:
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Current Litters</li>
<li>Gallery
<ul>
<li>Bandi</li>
<li>Studs Used</li>
<li>Test Dog2</li>
<li>Test Dog3</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
Here is the rest of my code
actually without it i noticed that my drop down menu under (gallery) doesn't display correctly, ...here is the rest of that css file...that shows what happens to the drop down...maybe you can tell me why the float screws it all up...
...and the text align did great....but only after removing the float...
#nav li a:hover {
text-decoration:underline;
}
#nav li ul{
padding:10px;
font-size:medium;
display:none;
position:absolute;
left:0px;
top:30px;
background-color:rgba(50,50,50,0.8);
}
#nav li:hover ul {
display:block;
border-radius:20px;
border:1px solid;
width:150px;
}
This is actually quite simple, since your list items are display:inline. Add this style:
#nav {
text-align:center;
}
Demo: http://jsfiddle.net/fH6f5/
There are many other ways to do it, but this appears to be all you need. Just make sure not to float the <li>s (I see you have it commented out).
Adding text-align: center to the nav unordered list seems to work for me in chrome
#nav {
text-align: center;
}
To center a block element, you also need to explicitly set the width to some value, like this:
#nav {
width: 50%;
margin: 0 auto;
}
There are quite a few changes you're going to need to make to your code in order for it to display properly. Your list elements are currently inline elements. inline elements have a lot of restrictions, including not being able to explicitly set their width, height, and their top and bottom margin. Keep in mind that per the W3 spec:
Generally, inline elements may contain only data and other inline elements.
That being said, you can use display: inline-block with no problems for your current code. There is one very important thing to keep in mind about using inline-block elements: whitespace. Any space between inline-block elements in your code will be shown as a space on your browser. So, if you want the elements to be touching, their tags must be touching also:
<!-- Version A: This will produce a gap between the two elements -->
<li>Home</li>
<li>About Us</li>
<!-- Version B: This will not produce a gap between the two elements -->
<li>
Home
</li><li>
About Us
</li>
If you choose Version A from the code above, I'd recommend you float the elements rather than relying on inline-block for positioning. Centering a floated list is a bit more difficult than centering an inline list. Here's a way that I like to center floated elements:
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
CSS:
nav { overflow: hidden; }
nav ul {
position: relative;
float: left;
left: 50%;
list-style: none;
padding: 0; }
nav ul li {
position: relative;
float: left;
right: 50%;
margin: 0 5px; }
nav ul li a { display: block; }
Preview: http://jsfiddle.net/Wexcode/rsDbY/
You should post the design that you want for your dropdown menu, I don't really know what you want your final result to look like so I can't really help you with that.
You need to set a fixed width on your ul for margin-right:auto and margin-left:auto
Have you tried to add margin: 0 auto; to #nav style? You also have to set the ul width to get this working.
It's a bit more complicated then simply "text-align" as you have the text inside of a . You need to add "margin: 0px auto;" to your element in your css file. This will then center the divider on the screen first, then center the next element within the divider and so on.
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;
}