内部 div <ol> 工作正常，但 <ul> 不工作。如何解决这个问题？ [关闭]答案

【问题标题】：Inside div <ol> is properly working but <ul> is not working. How to solve this? [closed]内部 div <ol> 工作正常，但 <ul> 不工作。如何解决这个问题？ [关闭]
【发布时间】：2020-07-05 10:37:04
【问题描述】：

在引导类的 div 内部，我想创建一个 ul，但它会自动浮动，但 ol 运行良好。我以最好的方式在 stackoverflow 中搜索了解决方案。如果这个问题已经回答了我的歉意。

<div class="col-md-8 col-xs-6 about-content">
                <h2>The short</h2>
                 <ul class="menu">
                    <li>item-1</li>
                    <li>item-2</li>
                    <li>item-3</li>
                    <li>item-4</li>
                    <li>item-5</li>
                </ul>  
                <h2>The long</h2>
                <p> content </p>       
            </div>

我在 CSS 中应用了 KISS 规则，并在 stackoverflow 中应用了任何其他可能的解决方案。但是，我无法弄清楚错误。请帮我解决这个问题。提前致谢！

【问题讨论】：

你可以用 ol 来做，然后去掉样式...
你能提供一个minimal reproducible example吗？
这是我的整个代码，它在
内，而
在内，先生 @D.Pardal 谢谢您的回复先生
是的，先生。但是，我不知道为什么
我编辑了你的问题以包括 Bootstrap，它似乎工作得很好。

【解决方案1】：

当您为li 制作inline-block 时删除ul li { display: inline-block; }，然后它会成为同一行或内联。

.about-content {
  margin-left: 40px;
  border: 1px solid #EFF0F1;
  width: 900px;
  height: 550px;
  margin-bottom: 4%;
  text-align: left;
}

#menu {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
}

#menu ul {
  margin: 0;
  padding: 0;
  display: inline-block;
  list-style: none;
  /*Set display to inline-block to the ul*/
}

#menu li {
  text-decoration: none;
}

ul {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<div class="col-md-8 col-xs-6 about-content">
  <h2>The short</h2>
  <ul id="menu">
    <li>item-1</li>
    <li>item-2</li>
    <li>item-3</li>
    <li>item-4</li>
    <li>item-5</li>
  </ul>
  <h2>The long</h2>
  <p> content </p>
</div>

【讨论】：

我将 menu 声明为 id sir。所以我用了#。然后，如果我添加这些脚本，我的整个导航栏就会折叠
@BhavaniKasiviswanathan 这里正在为 ID 工作 sn-p：jsfiddle.net/Manju06/d5temaso/3
是的，先生，它正在工作。但是，如果我添加脚本，我上面的整个导航栏都会折叠
您提出的问题已解决，其他问题可能与您共享的代码无关，可能与您所在位置的其他代码有关，因此很难说是什么问题，但是这是您提出的问题的答案。
其实正如你所说，这两个代码都解决了问题。但是导航栏中的问题可能在其他脚本中，我会解决的

【解决方案2】：

这样的事情呢

如果你想要像item-1 item-2 item-3 item-4 item-5这样的列表

.about-content{
    margin-left: 40px;
    border: 1px solid #EFF0F1;
    width: 900px;
    height: 550px;
    margin-bottom: 4%;
    text-align: left;    
}

.menu{
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left; 
}

.menu ul{
    margin:0;
    padding:0;
    display: inline-block;
    list-style: none;   /*Set display to inline-block to the ul*/
}

.menu li{
    text-decoration: none;
}


ul { text-align: center; }
ul li { display: inline-block; }

    <div class="col-md-8 col-xs-6 about-content">
      <h2>The short</h2>
      <ul class="menu">
        <li>item-1</li>
        <li>item-2</li>
        <li>item-3</li>
        <li>item-4</li>
        <li>item-5</li>
      </ul>
      <h2>The long</h2>
      <p> content </p>
    </div>

现在<ul> 或Un-ordered list 可以正确并排显示。

如果你想要这样的列表

item-1
item-2
item-3 
item-4 
item-5

.about-content{
    margin-left: 40px;
    border: 1px solid #EFF0F1;
    width: 900px;
    height: 550px;
    margin-bottom: 4%;
    text-align: left;    
}

.menu{
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left; 
}

.menu ul{
    margin:0;
    padding:0;
}

.menu li{
    text-decoration: none;
    list-style: none;
}


ul { text-align: center; }

    <div class="col-md-8 col-xs-6 about-content">
      <h2>The short</h2>
      <ul class="menu">
        <li>item-1</li>
        <li>item-2</li>
        <li>item-3</li>
        <li>item-4</li>
        <li>item-5</li>
      </ul>
      <h2>The long</h2>
      <p> content </p>
    </div>

【讨论】：

item-1 item-2 item-3 item-4 item-5 长这样显示
@BhavaniKasiviswanathan 你能告诉我你想如何显示列表
我要一个一个地显示列表。就像通常列表的工作方式一样