Question

我正在尝试在<ul>上使用CSS，但是由于某些原因，我无法弄清楚为什么它不适用。我正在尝试将列表样式化为菜单栏以进行练习，但无法使其注册。谁能看到我所缺少的吗？

我尝试过#menu ul{} #menu ul li{}，但两者都不起作用。

    #container {
      width: 1050px;
      border: 1px solid grey;
      margin: 0 auto;
    }
    
    #header {
      height: 100px;
      padding: 10px 0;
    }
    
    #brand {
      float: left;
    }
    
    h1 a{
      font-size: 40px;
      font-weight: 100;
      text-decoration: none;
      color: #861BFF;
    }
    
    #searchBox {
      float: right;
      background: linear-gradient(#E4F2B9, #B7E953);
      width: 400px;
      height: 50px;
      padding: 20px 20px 0 20px;
    }
    
    .text {
      float: left;
      width: 200px;
      padding: 5px;
      font-size: 15px;
      color: #E36A0C;
      background: white url(./images/search22px.png) right center no-repeat;
    }
    
    .submit {
      float: right;
      font-weight: bold;
      padding: 5px;
      color: white;
      background: #A751D6;
      font-size: 15px;
    }
    
    ul {
      list-style: none;
    }

 <!DOCTYPE html>
  <html lang="en" dir="ltr">
    <head>
      <meta charset="utf-8">
      <title>Maths Website</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
      <link rel="stylesheet" href="maths.css">
    </head>
    <body>
      <div id="container">

        <div id="header">
          <div id="brand">
            <h1><a href="#">Maths the Fun Way</a></h1>
          </div>
          <div id="searchBox">
            <form method="get">
              <input type="text" class="text" name="searchBox">
              <input type="submit" class="submit" value="Search a Topic">
            </form>
          </div>
          <div class="clear">
          </div>
        </div>

        <div id="menu">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Online Tutorials</a></li>
            <li><a href="#">Get a Private tutor</a></li>
            <li><a href="#">Sign Up</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </div>
      </div>
    </body>
  </html>

上面是完整的代码。我已经尝试过使用Firefox和Chrome，但两者都存在问题。

Answer 1

您的代码可以像Adam所说的那样完美地工作。参见https://jsfiddle.net/kabsw9gr/

#menu ul {
  margin: 0 0 10px 0;
  padding: 0;
  list-style: none;
}

#menu ul li {
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(#E4F2B9, #B7E953);
}

无法将CSS应用于ul

1 个答案: