Here's the gist
The links are separated in multiple lines,
I want it at the same line and centered
Expected result
Current
Try this one here
ul {
display: block;
text-align: center;
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline-block;
}
Related
I've a button on the right side.
If I choose this button, a DIV opens with other elements.
It looks like:
[6x][5x][4x][3x][2x][1x][BUTTON]
What I want to achieve is that each element takes the width of the previous one and adds up to 50px.
<details>
<summary>CHA</summary>
<ul>
<li>ENG</li>
<li>FRA</li>
<li>ATA</li>
<li>AUT</li>
<li>BEL</li>
<li>BRA</li>
</ul>
</details>
summary {
position: absolute;
right: 0;
top: 0;
}
ul{
width: 100%;
right: 50px;
position: absolute;
}
ul li {
float: right;
margin-left: 1rem;
}
ul li a,
summary {
color: #fff;
display: flex;
width: 50px;
height: 100%;
justify-content: center;
align-items: center;
}
The problem here is that the element - ul li a dont get the full height.
By adding to the ul li a element a position absolute all are at the same position/place.
So I thought I can use the nth-of-type(x) css statement like:
ul li a:nth-of-type(n){
right:calc(50px+n)
}
Or somehow like that - I know that this is not the right syntax.
Is it possible, am I thinking wrong, how to?
Here is the PEN:
https://codepen.io/User-123456789/pen/MOzdLp
Hi I am reformatting a menu bar in CSS design using Sublime text reader. This is for a homepage created from a template using Omeka. The main problem I am having is the padding on the end of the menu-bar; particularly with the "last-child". I tried to add padding to see if that would expand the background color but it won't change. The background color ends directly after the word ends. Here is the code:
#primary-nav
{
clear: none;
float: right;
width: auto;
padding: 0 20px;
}
#primary-nav a
{
display: block;
border: none;
color: #ffffff;
background-color: #13294B;
text-align: center;
height: 53px;
line-height: 53px;
padding: 0px 20px;
}
#primary-nav li
{
border: none;
}
#primary-nav li a:hover
{
background-color: #00a3e0;
color: #121111;
}
#primary-nav .navigation > li:first-child a
{
border: none;
}
#primary-nav .navigation > li:last-child a
{
border:none;
text-align: center;
padding: 0px 20px;
}
As a last note, if there is a way to condense this code that would be nice. This is the code that was generated from the template. The only part that was added was "last-child" to fix the formatting at the end of the menu bar.
Here is a link to the webpage so you can see what I am describing. http://digitalhistory.butlerlibraryservices.org/
You have this line in your style.css CSS file (Line 1931) which is causing the problem:
#primary-nav .navigation > li:last-child a {
padding-right: 0;
}
Remove it and you should fix your issue.
I'm trying to center and unordered list perfectly with the title of my website the title on top with the UL elements centered underneath.
The problem is that it does center, but not perfectly aligned with the overhead title. It is slightly to the right.
Here is my code:
.title{
text-align: center;
}
nav{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
background: blue;
}
li {
text-align: center;
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
background: red;
}
ul {
padding: 0;
}
The slight right-side bias is because of the default padding the entire list gets, not the individual list items. Setting it to zero eliminates the unnecessary offset.
I have to guess the HTML, but most likely you have a <ul> inside your <nav> element. Use this CSS:
nav > ul { margin-left: 0; padding-left: 0; }
just a quick CSS question. Does anyone know how to display a horizontal list at the center of the div tag. The number of elements in the list can change from page to page and I was hoping for them to start in the middle of the page. For example if there was only on list item then it would be in the center but if there was two then the first one would move slightly to the left and the second would be slightly to the right. I know the changes have to be made to the ul and li CSS code. This is what I have so far
.ui-yt-tabs {
position: relative;
width: 740px;
height: 600px;
float: left;
}
.ui-tabs .ui-tabs-nav {
position: absolute;
top: 470px;
height: 117px;
width: 735px;
padding: 0px;
}
.ui-tabs .ui-tabs-nav li {
list-style: none;
float: left;
position: relative;
}
You can do something like this:
ul {
text-align:center;
}
ul li {
display: inline-block;
}
Just remember to remove float: left; from your LI items
I am having trouble with my navigation menu. Here is my CSS:
ul.main {
background-color: #CCC;
display: inline-block;
}
ul.main > li {
list-style-type: none;
display: inline-block;
position: relative;
}
ul.subNav {
background-color: #333;
color: #FFF;
padding: 0;
margin: 0;
position: absolute;
}
ul.subNav li {
list-style-type: none;
padding: 0;
margin: 0;
}
What I am trying to do is make my sub navigation as wide as the longest sub item in the menu so the ul.subNav are as wide as the longest li. I can't seem to make this happen.
What am I doing wrong here?
If I understand correctly, you'll need white-space: nowrap on your subNav li elements:
ul.subNav li {
list-style-type: none;
padding: 0;
margin: 0;
white-space: nowrap;
}
Here's a working demo. If you want to know more, here are some links about the property:
W3 Wiki page on white-space
MDN page on white-space (light-weight page)
W3 spec on white-space
Jeroen is right, and he beat me to it. white-space: nowrap; will do the trick. Here's 2 working demos I made to demonstrate:
with nowrap
without nowrap