I have tried and researched many ways but I couldn't find out how to align unordered list in center. it seems like the bullets are not connected to the text and stay still.
here is the html code:
<ul id="facts">
<li>fact 1</li>
<li>fact 2</li>
<li>fact 3</li>
</ul>
and this is the css code:
#facts {
text-align: center;
}
the result will be like
You can use list-style-position: inside; to set the bullets in front of the text like this:
#facts {
text-align: center;
list-style-position: inside;
}
<ul id="facts">
<li>fact 1</li>
<li>fact 2</li>
<li>fact 3</li>
</ul>
You can put your Unordered List in an element with the class of .container and define .container like this:
.container{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
}
<div class="container">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Set</li>
</ul>
</div>
Related
I have a strong tag in ul tag, like,
<ul>
<strong>Whats included in strong tag</strong>
<li>li tag 1</li>
<li>li tag 2</li>
</ul>
The result shows in a website page, like
Whats included in strong tag li tag
1 li tag 2
I want to make the text of the strong tag(Whats included in strong tag) left-aligned to the position of li tag.
Except setting up margin value in strong tag, is there any other way to do it?
li.strong{
list-style-type: none;
}
.li1{
margin-left:30px;
}
.li2{
text-indent: 30px;
list-style-type:none;
}
.li2::before{
content:"• ";
}
.li3{
position:relative;
left: 30px;
}
.strong4{
position:absolute;
left:0px;
}
.li4{
position:relative;
top:16px;
}
.li5{
text-align:center;
list-style-type:none;
}
.li5::before{
content:"• ";
}
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li1">li tag 1</li>
<li class="li1">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li2">li tag 1</li>
<li class="li2">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li3">li tag 1</li>
<li class="li3">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong class="strong4">Whats included in strong tag</strong></li>
<li class="li4">li tag 1</li>
<li class="li4">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li5">li tag 1</li>
<li class="li5">li tag 2</li>
</ul>
Use margin left on the <li> elements instead of <strong> tag.
Use text indent
Use position relative on <li> tags or on <strong> tag.
Use position absolute on <strong> and position relative on <li>
Use text align
You can make the strong text an li with styling to remove the bullet and shift it left.
.nobullet {
list-style-type: none;
margin-left: -15px;
}
<ul>
<li class="nobullet"><strong>Strong Text!</strong></li>
<li>Other text!</li>
</ul>
It should not be set in the first li because this would assume a sibling relationship to the preceding li elements whereas the header is more important in the hierarchy. Imagine screen-readers etc
<strong>Strong Text!</strong>
<ul>
<li>Other text</li>
</ul>!
I'm trying to use flexbox on my <ul> so I can align them next to eachother. When I use this display:flex; flex-direction: row; on my <ul> it will also effect the child (in this case all the <li>)
I tried giving the <li> a display:flex; aswell and flex-direction: column; but this did not help.
How can I achieve what I'm trying to do here?
Look at my jsFiddle for a demo.
If you want each <ul> displayed as a column next to each-other, you can wrap all of your <ul> inside of a div like so:
div {
display: flex;
}
ul {
display: flex;
flex-direction: column;
}
<div>
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
<ul>
<li>Best 1</li>
<li>Best 2</li>
<li>Best 3</li>
</ul>
</div>
I am trying to make a menu with submenus. I wrote my HTML and it looks like:
<nav>
<ul>
<li>Home</li>
<li>Page 1
<ul>
<li>dropdown 1</li>
<li>dropdown 2</li>
<li>submenu
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ul>
</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
I have a stylesheet linked to it, and it looks like:
nav ul {
display:inline-block;
position:relative;
list-style:none;
}
nav ul ul {
display:none;
}
nav ul li:hover > ul {
display:block;
}
For some reason the list is displayed as a block. I tried float:left, and it made no difference.
You have to to put display:inline-block for li elements:
nav li {
display:inline-block;
}
check here the example: http://jsfiddle.net/9y1uzqye/1/
You need to make the individual list items use block display, not the list itself.
I have a question about my sitemap if you look at the code you see ul and li. But every UL is below the other and i want it to be side by side. Every new UL side by side. How doe i do this? Working with first-child? ( the sitemap is inside my )
Sitemap
<ul>
<li>Opleiding</li>
<ul>
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
<li>Onderwijsprogramma</li>
<ul>
<li>Mededelingen</li>
<li>Uitagenda</li>
<li>Propedeuse</li>
<li>Verdieping 1</li>
<li>Verdieping 2</li>
<li>Afstuderen</li>
</ul>
<li>Organisatie</li>
<ul>
<li>Contact</li>
<li>Blog</li>
<li>Docenten</li>
<li>Onderwijsbureau</li>
<li>Stagebureau</li>
<li>Buitenlandbureau</li>
<li>Examencommissie</li>
<li>Decaan</li>
</ul>
<li>Stages en Projecten</li>
<ul>
<li>Stages</li>
<li>Projecten</li>
</ul>
</ul>
This is my CSS
footer{
width: 100%;
position: absolute;
top: 317%;
left: -10%;
background: lightgrey;
margin:10%;
padding: 2%;
}
Try display inline-block or float left on the ul's you want side by side. I recommend adding classes to make the styling easier
HTML:
<ul>
<li>Opleiding</li>
<ul class="sitemap">
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
<li>Onderwijsprogramma</li>
<ul class="sitemap">
<li>Mededelingen</li>
<li>Uitagenda</li>
<li>Propedeuse</li>
<li>Verdieping 1</li>
<li>Verdieping 2</li>
<li>Afstuderen</li>
</ul>
<li>Organisatie</li>
<ul class="sitemap">
<li>Contact</li>
<li>Blog</li>
<li>Docenten</li>
<li>Onderwijsbureau</li>
<li>Stagebureau</li>
<li>Buitenlandbureau</li>
<li>Examencommissie</li>
<li>Decaan</li>
</ul>
<li>Stages en Projecten</li>
<ul class="sitemap">
<li>Stages</li>
<li>Projecten</li>
</ul>
</ul>
CSS:
footer .sitemap {
display: inline-block;
OR
float: left;
}
Well, for starters your markup is invald. If you want to nest ULs inside of another UL, it needs to be inside of an LI
<ul>
<li>Title
<ul>
<li>Sub-Title</li>
</ul>
</li>
</ul>
From there, you probably just need something like this:
footer > ul > li {
float:left;
width:50%;
}
http://jsfiddle.net/fTCY5/
I have a menu element like:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</li>
<li>Item 4</li>
</ul>
The element is positioned absolutely. How can I center it without knowing its width (number of parent elements might change).
Regards,
Dave
I think what you're after is possible if you have a parent element to the ul:
<div class="example">
<ul>
<!-- lots of li's -->
</ul>
</div>
Then use the old school text-align trick that was used to center layouts:
.example {
text-align: center;
}
.example ul {
text-align: left;
display: inline-block;
}
See: http://jsfiddle.net/chippper/WK5Z4/