CODEWITHSUNDEEP
htmlcss
redheadkelly
redheadkelly

Reputation: 13

ul not aligning properly in div

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

Answers (3)

bharti parmar
bharti parmar

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

Fatemeh Qasemkhani
Fatemeh Qasemkhani

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

Michał Sadowski
Michał Sadowski

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

Related Questions