Reputation: 13
I have a nav next to a div. Nav is floated left. Then I have a ul in the div.
All of the bullets for the ul are so far left that they are in the nav section.
The text of the li items is aligned with paragraph text instead of the bullets being aligned with the paragraph text.
How do I make the ul align as it normally would?
.toc {
float:left;
width:100px;
}
.content {
position:relative;
}
<nav class="toc">
<ol>
<li>section 1
<li>section 2
<li>section 3
<li>section 4
<li>section 5
</ol>
</nav>
<div class="content">
<p>Text text text text text text text text text text text text text text text text text text text text text.
<ul>
<li>item 1
<li>item 1
<li>item 1
</ul>
</div>
Upvotes: 0
Views: 858
Reputation: 434
.toc {
display: inline-block;
width:100px;
}
.content {
display: inline-block;
position:relative;
}
p{
margin-left:20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<nav class="toc">
<ol>
<li>section 1
<li>section 2
<li>section 3
<li>section 4
<li>section 5
</ol>
</nav>
<div class="content">
<p>Text text text text text text text text text text text text text text text text text text text text text.</p>
<ul>
<li>item 1
<li>item 1
<li>item 1
</ul>
</div>
</body>
</html>
Upvotes: 1
Reputation: 2042
Instead of float add display inline-block to your classes.
.toc {
display: inline-block;
width:100px;
}
.content {
display: inline-block;
position:relative;
}
Upvotes: 0
Reputation: 2159
This is the default behaviour of bullets/numberings - they appear to the left of normal paragraph flow. To align them with the text you need to do it yourself. The easiest way to do it is to use li { margin-left: 1em }
.
Upvotes: 0