I am trying to have equal spacing between four different li elements, but I end up with this:
HTML:
<ul><li>Inbox</li></li><li>Drafts</li></li><li>Sent</li></li><li>Trash</li></ul>
CSS:
ul li {
width: 25%;
display: inline-block;
text-align: center;
}
I have tested the CSS and it is working as it should. I think the problem is that the li's don't all have the same amount of letters, so you end up with some weird visual effects. My reason for believing this:
(Equal spacing)
My approach with this issue is to center the li on the ul since the ul will naturally be the same width than the parent.
ul {
/* Use flex boxes to align li items */
display: flex;
justify-content: space-around;
/* Remove default padding from major browsers */
padding: 0;
/* Hide the default decorations for li items */
list-style: none;
}
ul > li {
/* Display the elements in one line */
display: inline-block;
}
Check out this JSFiddle to see it working.
Try this
ul {
width:100%;
margin-left: 0;
margin-bottom: 0
}
li {
list-style-type: none;
display: inline-block;
margin-right: 20px;
}
Related
My li items are taking up the full width of their text and creating a second line in the instead of breaking downward into the li itself. I've tried the following but it's not really providing that responsive sizing I'm looking to add.
.sub-nav li > a {
width: min-content;
line-height: 1.1em;
}
https://www.harpercollege.edu/academics/index.php
change CSS rule .sub-nav ul to this:
.sub-nav ul {
display: flex;
margin-top: 0;
padding-left: 70px;
margin-bottom: 10px;
height: min-content;
flex-wrap: nowrap;
}
You may want to reduce font size, and use condensed font https://fonts.google.com/?query=condensed
I want to create a menu with the width of 100%.
Children width is auto, but i want fixed to parent
And I don't set width of children since their texts has different lengths.
Sample:
I use this CSS but it doesn't work in a desirable way:
#menu a {
padding:10px calc(100% / 5);
}
How do I achieve this?
you can use this trick to do just that
nav {
width: 100%;
}
nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
flex-grow: 1;
text-align: center;
}
nav ul li a {
display: block;
}
Read full article to better understand it responsive fluid width variable item navigation css
Set this to the parent :
.parent{
display:flex;
}
Set this to the children:
.children{
flex:1;
text-align:center;
}
In my main horizontal navigation, I have a container called #main-nav, and buttons in the form of anchor tags within. The anchor tag size won't match up with the #main-nav container, and I can't figure out why.
oh, also, the dropdown menus sit higher on the baseline of the menu than they should a few pixels, I'm not sure if this is related.
I currently have the highlight color and dropdowns the same as the menu bar to disguise the problem, but this isn't optimal. (A code inspector clearly shows the problem)
My site is http://www.darkmatter-designs.com/
Any help would be greatly appreciated, I've run out of ideas.
Use max-width and margin 0 auto to center your ul in nav
#main-nav ul {
/* display: inline-block; */
position: relative;
max-width: 960px;
margin: 0 auto;
}
CSS Centering:
If you just want the anchors to be "centered":
#main-nav ul {
position: relative;
/* display: inline-block; */
max-width: 960px;
margin: 0 auto;
text-align: center;
}
#main-nav ul li {
/* float: left; */
display: inline-block;
}
To fixe the dropdown you can add padding-top to #main-nav ul ul
#main-nav ul ul {
background: #1E344A;
position: absolute;
top: 100%;
z-index: 1;
padding-top: 3px;/*was added*/
}
and since you are using position absolute to ul ul make sure you add position:relative to the parent element like this:
#main-nav ul li {
float: left;
position: relative;/*was added*/
}
I've been trying to fix this for an hour now and can't find a solution.
What I want is a centered list with background image as "ticks".
I want this:
Works as it should except the dots are aligned to the left of the list ul (1140px wide) and not the left of the list item li which is centered.
You can use the css :before pseudo-class:
ul {
list-style: none;
text-align: center;
}
li:before {
content: "\2022";
}
http://jsfiddle.net/e6y9d/
If you want the dots to be aligned to the left of ul, Use dot image as background:
ul li {
text-align: center;
background: url(path/to/dot.png) 0 center no-repeat;
}
JSBin Demo #1
Update
If you need the dots to be aligned to the left of list items, use the following:
ul {
list-style-type: none;
padding: 0;
text-align: center;
white-space: pre-line;
}
ul li {
display: inline-block;
padding-left: 15px;
background: url(path/to/dot.png) 0 center no-repeat;
}
JSBin Demo #2
I want to display the content of the div element in a single row. However the width of the ul element is unknown because it can have a number of child li elements. The h2 would always occupy the rest of the space. each li element has a width of 20px.
It would look something like this:
|----h2------------|li|li|li||
|----h2---------------|li|li||
HTML:
<div>
<h2>name</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
I have found numerous solutions on the internet but not sure which to choose (proper solution vs hacks). browser compatibility is not an issue, it only needs to work on the latest version of chrome.
Update:
There will be multiple rows of div elements and the li elements should align.
The simplest, most compact and straight forward way is to use floats. If you know your elements will be different sizes, but you don't know exactly what they will be, there are 2 completely flexible ways to go about this.
This would be how to do it using display: table:
http://jsfiddle.net/8uTfp/1/
div {
display: table;
width: 100%;
}
h1, ul {
display: table-cell;
vertical-align: middle;
}
ul {
text-align: right;
}
li {
display: inline-block;
}
This would be how to do it using flexbox:
http://jsfiddle.net/8uTfp/
div {
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
ul {
margin-left: auto;
}
li {
display: inline-block;
}
You could float the h2 left, and the ul right.
div h2 { float: left; }
div ul { float: right; }
If the div's height and the list items' height are fixed and known values, you could try the followihg CSS (notice I added css classes):
.container{
height: 30px;
position: relative;
}
.container ul{
padding: 0; margin: 0;
/* Other reset rules here ... */
position: absolute;
top: 0;
right: 0;
}
.container ul li{
display: inline;
float: left;
height: 30px;
/* Other format rules here ... */
}
If you don't specify the div's height, it will be set by the h2 element's metrics, since absolutely positioned elements don't force the layout. I hope this helps.