如何在 html 和 css 中设置两个不同列表的样式答案

【问题标题】：How do I style two different lists in html and css如何在 html 和 css 中设置两个不同列表的样式
【发布时间】：2018-03-11 21:10:05
【问题描述】：

所以我尝试创建一个网站，其中有一个导航栏（它使用了一个无组织的列表），然后我为我要写的杂志的菜单做了另一个（基本上就像一个目录））。我使用了元素，但后来我在导航栏上看到了点，不知道如何修复它。任何解决点问题或修复我的代码的帮助将不胜感激。谢谢你。我的代码将在下面。注意：我是 stack-overflow 的新手，不知道如何使用它，所以我对我的愚蠢错误感到非常抱歉。

<!--DOCTYPE html-->
<!--Decleration-->
<html lang="fr">
<head>
<meta charset="utf-8">
<title>
Accès Magazine-Début</title>
</head>
<body>
<!--Navigation Bar-->
<div class="nav">
<nav>
<ul>
<h1 id="n_title">Accès Magazine</h1>
<input type="text" placeholder="Cherche...">
<li><a class="active" href="home.html">Début</a></li>
 <li><a href="magazines.html">Magazines</a></li>
 <li><a href="t_news.html">Actualites Tendances</a></li>
 <li><a href="sub.html">Abonner</a></li>
 <li><a href="contact.html">Contacte Nous!</a></li>
 </ul>
 </nav>
 </div>
 <!--Start of Body-->
 <h1 id="first_title">Lecture d'Ajourd Hui</h1>
 <hr  />
 <!--Start of Magazine-->
 <h1 id="m_title">Jeudi, Mars 15<sup>ème</sup>, 2018</h1>
 <p>Par: .</p>
 <img src="https://www.pixilart.com/images/art//f93e748af187b11.png?v=1520646930" alt="Coverture de Magazine" title="Accès Magazine. Jeudi Mars 15<sup>ème<sup>, 2018" width="500" height="450">
<p>
  <figcaption>
    Premier page
   </figcaption>
  </p>
<hr  />
<!--Next Page-->
<h3>Sommaire</h3>
<div class="sum">
<ul>
  <li>Technologie</li>
  <li>La Meteo</li>
  <li></li>
  <li></li>
  <li><li>
  <li>Petits Anonces</li>
</ul>
  </div>
//CSS
.nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
 }
.nav li {
float: left;
}
.nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
 }
.nav li a:hover {
 background-color: #111;
 }
 .nav .active {
 background-color: #4CAF50;
 }
 #n_title {
 color: white;
 }
 input[type=text] {
 float: left;
 padding: 6px;
 border: none;
 marging-top: 10px;
 marging-right: 20px;
 font-size: 17px;
 }
 .nav {
 position: -webkit-sticky;
 position: sticky;
 top: 0;
 }
 body {
 background-color: white;
 } 
 p {
 background-color: null;
 } 
 #first_title {
 color: black;
 text-align: center;
 }
 .sum {
 text-align: left;
 }

【问题讨论】：

标签： css html html-lists nav

【解决方案1】：

list-style-type 属性应该用于<ul>。

添加在下方

.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

/* added */
.nav ul {
  list-style: none;
}

.nav li {
  float: left;
}

.nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav li a:hover {
  background-color: #111;
}

.nav .active {
  background-color: #4CAF50;
}

#n_title {
  color: white;
}

input[type=text] {
  float: left;
  padding: 6px;
  border: none;
  marging-top: 10px;
  marging-right: 20px;
  font-size: 17px;
}

.nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

body {
  background-color: white;
}

p {
  background-color: null;
}

#first_title {
  color: black;
  text-align: center;
}

.sum {
  text-align: left;
}

<!--Navigation Bar-->
<div class="nav">
  <nav>
    <ul>
      <h1 id="n_title">Accès Magazine</h1>
      <input type="text" placeholder="Cherche...">
      <li><a class="active" href="home.html">Début</a></li>
      <li><a href="magazines.html">Magazines</a></li>
      <li><a href="t_news.html">Actualites Tendances</a></li>
      <li><a href="sub.html">Abonner</a></li>
      <li><a href="contact.html">Contacte Nous!</a></li>
    </ul>
  </nav>
</div>
<!--Start of Body-->
<h1 id="first_title">Lecture d'Ajourd Hui</h1>
<hr />
<!--Start of Magazine-->
<h1 id="m_title">Jeudi, Mars 15<sup>ème</sup>, 2018</h1>
<p>Par: .</p>
<img src="https://www.pixilart.com/images/art//f93e748af187b11.png?v=1520646930" alt="Coverture de Magazine" title="Accès Magazine. Jeudi Mars 15<sup>ème<sup>, 2018" width="500" height="450">
<p>
  <figcaption>
    Premier page
  </figcaption>
</p>
<hr />
<!--Next Page-->
<h3>Sommaire</h3>
<div class="sum">
  <ul>
    <li>Technologie</li>
    <li>La Meteo</li>
    <li></li>
    <li></li>
    <li>
      <li>
        <li>Petits Anonces</li>
  </ul>
</div>

【讨论】：

【解决方案2】：

将list-style-type: none; 添加到您的li，您可以添加尽可能多的CSS 规则来为您的页面添加样式。请做一些研究并从下面的 sn-p 中获取一些参考。

.nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
 }
nav ul{
display: block;
}
.nav li {
float: left;
list-style-type: none;
}
.nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
 }
.nav li a:hover {
 background-color: #111;
 }
 .nav .active {
 background-color: #4CAF50;
 }
 #n_title {
 color: white;
 }
 input[type=text] {
 float: left;
 padding: 6px;
 border: none;
 marging-top: 10px;
 marging-right: 20px;
 font-size: 17px;
 }
 .nav {
 position: -webkit-sticky;
 position: sticky;
 top: 0;
 }
 body {
 background-color: white;
 } 
 p {
 background-color: null;
 } 
 #first_title {
 color: black;
 text-align: center;
 }
 .sum {
 text-align: left;
 }

<body>
<!--Navigation Bar-->
<div class="nav">
<nav>
<h1 id="n_title">Accès Magazine</h1>
<input type="text" placeholder="Cherche...">
<div style="clear:both;"></div>
<ul>
<li><a class="active" href="home.html">Début</a></li>
 <li><a href="magazines.html">Magazines</a></li>
 <li><a href="t_news.html">Actualites Tendances</a></li>
 <li><a href="sub.html">Abonner</a></li>
 <li><a href="contact.html">Contacte Nous!</a></li>
 </ul>
 </nav>
 </div>
 <!--Start of Body-->
 <h1 id="first_title">Lecture d'Ajourd Hui</h1>
 <hr  />
 <!--Start of Magazine-->
 <h1 id="m_title">Jeudi, Mars 15<sup>ème</sup>, 2018</h1>
 <p>Par: .</p>
 <img src="https://www.pixilart.com/images/art//f93e748af187b11.png?v=1520646930" alt="Coverture de Magazine" title="Accès Magazine. Jeudi Mars 15<sup>ème<sup>, 2018" width="500" height="450">
<p>
  <figcaption>
    Premier page
   </figcaption>
  </p>
<hr  />
<!--Next Page-->
<h3>Sommaire</h3>
<div class="sum">
<ul>
  <li>Technologie</li>
  <li>La Meteo</li>
  <li></li>
  <li></li>
  <li><li>
  <li>Petits Anonces</li>
</ul>
  </div>

【讨论】：