CSS:列表中的条目不要开始新行

时间:2017-12-23 18:51:46

标签: html css

我的无序列表出现问题,因为我尝试创建的列表是这样的:  

            
  • A
  •         
  •     
但是我得到的列表全部在一行上,而B的项目符号重叠在A.这里是我的CSS代码的相关部分:



ul.c li {
  list-style-type: disc;
  background: #F2D7D5;
  font-family: 'lato', sans-serif;
  margin: 5px;
  font-size: large;
}

<ul class="c">
  <li>A</li>
  <li>B</li>
</ul>
&#13;
&#13;
&#13; Here's a screenshot of what I'm seeing

编辑: 这是我所有与列表相关的其他代码。我将它用于页面顶部的导航栏:

 li {
        float: left;
    }

        li a {
            font-family: 'Rye',cursive;
            font-size: 20px;
            display: block;
            color: black;
            text-align: center;
            padding: 5px 20px;
            text-decoration: none;
        }

        li a, .dropbtn {
            display: inline-block;
            color: white;
            text-align: center;
            padding: 8px 61.25px;
            text-decoration: none;
            background-color: black;
        }

            li a:hover, .dropdown:hover .dropbtn {
                background-color: indianred;
            }

            li a:hover {
                background-color: indianred;
            }

        li.dropdown {
            display: inline-block;
        }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 12px 16px;
        z-index: 1;
    }

        .dropdown-content a {
            color: black;
            background-color: #f1f1f1;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }

            .dropdown-content a:hover {
                background-color: white;
            }

    .dropdown:hover .dropdown-content {
        display: block;
    }

1 个答案:

答案 0 :(得分:-1)

利斯特先生得到了;这是我的

li {
  float: left;
}