ul не выравнивается должным образом в div - PullRequest
Новая
       3

ul не выравнивается должным образом в div

0 голосов
/ 20 апреля 2020

У меня есть навигация рядом с div. Нав плавает влево. Тогда у меня есть ul в div.

Все маркеры для ul так далеко оставлены, что они находятся в разделе nav.

Текст элементов li выровнен по абзацу текст вместо выровненных маркеров с текстом абзаца.

Как сделать так, чтобы ul выровнялся, как обычно? 

.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>

Ответы [ 3 ]

1 голос
/ 20 апреля 2020 

.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>
0 голосов
/ 20 апреля 2020

Вместо числа с плавающей точкой добавьте в свои классы встроенный блок отображения. 

.toc {
  display: inline-block;
  width:100px;
}
.content {
  display: inline-block;
  position:relative;
}
0 голосов
/ 20 апреля 2020

Это поведение маркеров / нумераций по умолчанию - они отображаются слева от обычного потока абзацев. Чтобы выровнять их по тексту, нужно сделать это самостоятельно. Самый простой способ сделать это - использовать li { margin-left: 1em }.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...