Почему список ul выходит за пределы div class = "col"

#html #css #html-lists

#HTML #css #html-списки

Вопрос:

Я создал <li> inside <div> , но он выходит за пределы div
, я пытаюсь использовать clearer (из другого аналогичного вопроса), но, похоже, у меня это не работает, и я должен использовать float left? потому что, когда я использую display:flex его, он работает

 .clearer {
  height           : 0;
  clear            : both;
  }
#listTopik li{
  background-color : red;
  padding          : 5px 40px 5px 40px;
  border-radius    : 5px;
  margin-left      : 10px;
  color            : white;
  }    
#listTopik {
  list-style       : none;
  display          : flex;
  }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="col-md-5">
  <h3>Topic</h3>
  <div class="col-md-5" style="width:100%">
    <ul id="listTopik">
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
    <div class="clearer"></div>
  </div>
</div>

Список вне div:

1. Вы хотите, чтобы список оставался горизонтальным, а затем переносился? Или вы хотите, чтобы список был один поверх другого (по вертикали)?

2. Потому что, если вы хотите, чтобы они оставались горизонтальными, не используйте display: flex, вы можете использовать class=»row» в теге ul, поскольку вы используете Bootstrap.

3. @Hybrid я хочу сделать его горизонтальным и обернуть затем в цикл

Ответ №1:

Ul переполняется из div из display:flex -за того, что, поскольку вы используете Bootstrap, вы можете фактически выстраивать списки, добавляя class="row" тег ul и поддерживая отзывчивость. Проверьте приведенный ниже код.

 div {
background: gray;
}
.list-container {
  background: blue;
}

.clearer {
  height:0;
  clear:both;
  
}
#listTopik li{
  background-color:red;
  padding:5px 40px 5px 40px;
  border-radius: 5px;
  color:white;
  margin: 5px;
}    
    
#listTopik {
  list-style:none;
}

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="col-md-7">
  <h3>Topic</h3>

    <ul id="listTopik" class="row">
      <li >A</li>
      <li>B</li>
      <li>C</li>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
    <div class="clearer"></div>
 
</div>

1. это работает, но как сделать поле верхним или нижним для каждого переноса как сделать поле между первой строкой и второй строкой @Jaocampooo

2. @NewComes Добавление нижнего и верхнего полей к каждому тегу li должно сработать, поскольку оно будет переноситься в зависимости от размера экрана или размера div.

Ответ №2:

попробуйте установить родительский идентификатор #listTopik в положение: относительное с максимальной шириной, а #listTopik li в положение: абсолютное

Ответ №3:

  <div class="col-md-5 temp">
                    <h3>Topic</h3>
                    <div class="col-md-5 temp" style="width:100%" >
                        <ul id="listTopik">
                            <li>A</li>
                            <li>B</li>
                            <li>C</li>
                            <li>A</li>
                            <li>B</li>
                            <li>C</li>
                            <li>A</li>
                            <li>B</li>
                            <li>C</li>
                            <li>A</li>
                            <li>B</li>
                            <li>C</li>
        
                        </ul>
                    </div>
                    </div>

 
.clearer {

     height:0;
     clear:both;
    }
#listTopik li{
            background-color:red;
            padding:5px 40px 5px 40px;
            border-radius: 5px;
            margin-left:10px;
            color:white;
            margin-bottom:10px
           
        }    
    
    #listTopik {
            list-style:none;
            flex-wrap: wrap;
            display:flex;
        }

1. Объяснение помогло бы OP.

2. Элемент списка переполняется из-за display: flex итак, что я сделал, это добавил встроенный блок отображения для каждого элемента списка, что он будет делать, так это отображать количество блоков, которые помещаются в одну строку, а другие — в другую строку и так далее