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>
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>
Please, give me some help in the following:
HTML code:
<div id="medium_ribbon">
<ul class="up_rectangles">
<li id="first_up"> </li>
<li id="second_up"> </li>
<li id="third_up"> </li>
<li id="fourth_up"> </li>
</ul>
</div>
Next, CSS code:
#medium_ribbon {
text-align:center;
background-color:#172236;
padding-top:20px;
}
.up_rectangles{
list-style: none;
margin-bottom: 0px;
}
.up_rectangles li {
line-height: 200px;
width: 265px;
background-color: #C8CACF;
display: inline-block;
margin-right:15px;
}
.up_rectangles>li:last-child {
margin-right:0;
}
Finally, the result:
The picture is a bit aligned to the right and I cannot discover the reason no matter how much I've tried.
Thank you
Your browser's default stylesheet automatically puts padding on .up_rectangles.
Simply reset if by applying this CSS rule:
.up_rectangles{
padding: 0;
}
Then it will work as expected: http://jsfiddle.net/R8pL3/
by default <ul> have some padding and margin.
So add the margin:0 and padding:0 in `.up_rectangles' class.
so the code will be like.
.up_rectangles
{
list-style-type: none;
margin: 0;
padding:0
}
Add padding-left:0 to your .up_rectangles class. The browser, be default, adds padding to ul elements. By adding padding-left:0 to the ul you'll fix this.
.up_rectangles{
list-style: none;
margin-bottom: 0px;
padding-left:0;
}
Here's the working demo.
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 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;
}
I've got a horizontal navigation bar made from an unordered list, and each list item has a lot of padding to make it look nice, but the only area that works as a link is the text itself. How can I enable the user to click anywhere in the list item to active the link?
#nav {
background-color: #181818;
margin: 0px;
overflow: hidden;
}
#nav img {
float: left;
padding: 5px 10px;
margin-top: auto;
margin-bottom: auto;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
margin: 0px;
background-color: #181818;
float: left;
}
#nav li {
display: block;
float: left;
padding: 25px 10px;
}
#nav li:hover {
background-color: #785442;
}
#nav a {
color: white;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
<div id="nav">
<img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
<ul>
<li>One1</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<div>
<h2>Heading</h2>
</div>
Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.
Define your anchor tag css property as:
{display:block}
Then the anchor will occupy the entire list area, so your click will work in the empty space next to your list.
Make the anchor tag contain the padding rather than the li. This way, it will take up all the area.
Super, super late to this party, but anyway: you can also style the anchor as a flex item. This is particularly useful for dynamically sized/arranged list items.
a {
/* This flexbox code stretches the link's clickable
* area to fit its parent block. */
display: flex;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
}
(Caveat: flexboxes are obvs still not well supported. Autoprefixer to the rescue!)
Use following:
a {
display: list-item;
list-style-type: none;
}
Or you could use jQuery:
$("li").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
You should use this CSS property and value into your li:
pointer-events:all;
So, you can handle the link with jQuery or JavaScript, or use an a tag, but all other tag elements inside the li should have the CSS property:
pointer-events:none;
Just simply apply the below css :
<style>
#nav ul li {
display: inline;
}
#nav ul li a {
background: #fff;// custom background
padding: 5px 10px;
}
</style>
here is how I did it
Make the <a> inline-block and remove the padding from your <li>
Then you can play with the width and the height of the <a> in the <li>
Put the width to 100% as a start and see how it works
PS:- Get the help of Chrome Developer Tools when changing the height and width
If you have some constraint where you need to keep <li> structure as is and would like your a tag to take up the full area within the li element you can do the following:
a {
display: flex !important;
width: -webkit-fill-available;
height: -webkit-fill-available;
justify-content: center;
align-items: center;
}
Put the list item within the hyperlink instead of the other way round.
For example with your code:
<li>One</li>