Question

我的主播列表链接没有在线显示。你能告诉我为什么，通过查看我的CSS代码，或者是因为我的HTML类引起的问题？

＆＃13;

ul {
  list-style-type: none;
  float: right;
}

li a {
  text-decoration: none;
  display: inline-block;
}

h1 {
  float: left;
}

＆＃13;

<header class="main-header group">
  <h1>HTML and CSS</h1>
  <nav class="main-nav">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="sports.html">Sports</a></li>
      <li><a href="movies.html">Movies</a></li>
      <li><a href="music.html">Music</a></li>
    </ul>
  </nav>
</header>

＆＃13;

Answer 1

使用以下CSS：

    .main-nav li {
        display: inline-block;
    }

希望这有帮助。

Answer 2

您需要将display: inline-block;从li a选择器移至新的ul li选择器。
原因是：li默认样式不是内联的。由于li是父级，li位于新行，然后其中的a是内联的（这已经是默认行为）。

这是一个片段：

＆＃13;

ul {
  list-style-type: none;
  float: right;
}

ul li{
  display: inline-block;
}

li a {
  text-decoration: none;
}

h1 {
  float: left;
}

＆＃13;

<!DOCTYPE HTML>
<html>

<head>
  <title>HTML and CSS</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <header class="main-header group">
    <h1>HTML and CSS</h1>
    <nav class="main-nav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="sports.html">Sports</a></li>
        <li><a href="movies.html">Movies</a></li>
        <li><a href="music.html">Music</a></li>
      </ul>
    </nav>
  </header>
</body>

</html>

＆＃13;

希望它有所帮助。

Answer 3

您应该在css中使用display属性inline-block来获取水平菜单。在您的代码中，您将浮动ul元素，这是不必要的但没有您的HTML代码我无法纠正您。检查下面的例子。

/* ul li (I prefer using classes to prevent global overrides) */
.nav-list li {
  list-style: none;
  display: inline-block;
  padding: 9px 20px;
  **text-transform: uppercase; 
  /* try adding more styles like borders / backgrounds / colors */
}**

.nav-list li a {
  text-decoration: none;
}

<nav class="nav-menu">

  <ul class="nav-list">
  
    <li class="nav-list-item"> 
      <a href="javascript:void(0)"> Home </a>
    </li>
    
    <li class="nav-list-item"> 
      <a href="javascript:void(0)"> About Us </a>
    </li>
    
    <li class="nav-list-item"> 
      <a href="javascript:void(0)"> Contact Us </a>
    </li>
  
  </ul>

</nav>

修改

display: inline-block中的
li a将无效，因为所有4 li都有单个锚元素。只有一个a元素排列在同一行中。您的li在a之后关闭。希望你明白了。

你能帮我看一下内联（水平）导航吗？

3 个答案: