如何删除项目符号，并使其余的html / css代码不会崩溃

时间：2019-03-03 22:38:35

标签： html css

问题出在我的HTML文件中。

我已经尝试过导航，这是我需要删除项目符号列表的位置，并尝试包括列表样式以将其删除。尽管这可行，但菜单的格式却瓦解了，我也不知道原因或解决方法。因此，我决定留下子弹，希望有人能为我的问题找到解决方案。我已经包括了正在使用的CSS和HTML代码。这是我的第一篇文章，所以如果有任何问题我可以做得更好，请告诉我。

* {
    padding:0;
    margin: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    width: 100%;
    position: relative;
}

body{
    height: 100%;
    background:#b794e6ff;
}

h2{
    padding: 40px;
    background: #646ecb;
    color:#f0f1f5;
    font-family: fantasy;
    text-align: center;
    font-size: 30pt;
    letter-spacing: 15px;
}

.navbar {
    background: #fc575e;
    height: 40px;
    width:700px;
    display: block;
    margin:0 auto;
    text-align: center;
    text-transform: uppercase;
}

nav a {
    display: block;
    text-decoration:none;
    font-family: monospace;
    font-weight: bold;
    font-size: 13pt;
    color: aliceblue;
}

nav a:hover {
    background:#223423;
    color: #f0f1f5;
}


nav ul {
  display: block;
    
}

nav ul li {
    float:left;
    width:140px;
    height: 40px;
    line-height: 40px;
    background:teal;
}

nav ul ul li{
    position: relative;
    display:none;
}

nav ul li:hover ul li{
    display:block;
}
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
     
      <link rel="stylesheet" type="text/css" href="css/maintravel2.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
       
   
      
      <title>Round-a-Whirl</title>
  </head>
  <body>
    <div class="wrapper">
        <header>
            <div></div>
           <h2>HEADER LOGO</h2>
        </header>
        <div class="navbar">
            <nav>
                <ul>
                    <li><a href="#"><i class="fa fa-plane"> Flights</i></a></li>
                    <li><a href="#"><i class="fa fa-hotel"> Hotel</i></a></li>  
                    <li><a href="#"><i class="fa fa-car"> Car Rental</i></a></li>
                <li><a href="#"><i class="fa fa-globe"> Discover</i></a>
                    <ul>
                    <li>Vacation</li>
                    <li>Cruise</li>
                    <li>City</li>
                    <li>Nature</li>
                    <li>Getaways</li>
                    </ul>
                    </li>
                <li><a href="#"><i class="fa fa-tag"> Deals</i></a></li>
                
                </ul>

            </nav>
      </div>
        <article>
        This is a simple site I created using HTML and CSS of a travel site for the fictional Round-a-Whirl travel company.
        </article>
        <footer>
            Round-a-Whirl &copy; 2019
        </footer>
      

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

2 个答案:

答案 0 :(得分：0)

请查看list-style-type。它为列表设置“项目符号”。用户代理样式表给出的标准是list-style-type: disc;。 将属性更改为list-style-type: none;以摆脱项目符号。

* {
    padding:0;
    margin: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    width: 100%;
    position: relative;
}

body{
    height: 100%;
    background:#b794e6ff;
}

h2{
    padding: 40px;
    background: #646ecb;
    color:#f0f1f5;
    font-family: fantasy;
    text-align: center;
    font-size: 30pt;
    letter-spacing: 15px;
}

.navbar {
    background: #fc575e;
    height: 40px;
    width:700px;
    display: block;
    margin:0 auto;
    text-align: center;
    text-transform: uppercase;
}

nav a {
    display: block;
    text-decoration:none;
    font-family: monospace;
    font-weight: bold;
    font-size: 13pt;
    color: aliceblue;
}

nav a:hover {
    background:#223423;
    color: #f0f1f5;
}


nav ul {
  display: block;
  list-style-type: none;  
}

nav ul li {
    float:left;
    width:140px;
    height: 40px;
    line-height: 40px;
    background:teal;
}

nav ul ul li{
    position: relative;
    display:none;
}

nav ul li:hover ul li{
    display:block;
}
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
     
      <link rel="stylesheet" type="text/css" href="css/maintravel2.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
       
   
      
      <title>Round-a-Whirl</title>
  </head>
  <body>
    <div class="wrapper">
        <header>
            <div></div>
           <h2>HEADER LOGO</h2>
        </header>
        <div class="navbar">
            <nav>
                <ul>
                    <li><a href="#"><i class="fa fa-plane"> Flights</i></a></li>
                    <li><a href="#"><i class="fa fa-hotel"> Hotel</i></a></li>  
                    <li><a href="#"><i class="fa fa-car"> Car Rental</i></a></li>
                <li><a href="#"><i class="fa fa-globe"> Discover</i></a>
                    <ul>
                    <li>Vacation</li>
                    <li>Cruise</li>
                    <li>City</li>
                    <li>Nature</li>
                    <li>Getaways</li>
                    </ul>
                    </li>
                <li><a href="#"><i class="fa fa-tag"> Deals</i></a></li>
                
                </ul>

            </nav>
      </div>
        <article>
        This is a simple site I created using HTML and CSS of a travel site for the fictional Round-a-Whirl travel company.
        </article>
        <footer>
            Round-a-Whirl &copy; 2019
        </footer>
      

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

答案 1 :(得分：0)

您想将样式changeCounterBy(amountToIncrease)添加到list-style-type:none;中的<ul/>

这可以像将其添加到CSS一样简单：

<nav/>

这是您的更新页面： 

.navbar ul {
    list-style-type: none;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  width: 100%;
  position: relative;
}

body {
  height: 100%;
  background: #b794e6ff;
}

h2 {
  padding: 40px;
  background: #646ecb;
  color: #f0f1f5;
  font-family: fantasy;
  text-align: center;
  font-size: 30pt;
  letter-spacing: 15px;
}

.navbar {
  background: #fc575e;
  height: 40px;
  width: 700px;
  display: block;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
}

.navbar ul {
  list-style-type: none;
}

nav a {
  display: block;
  text-decoration: none;
  font-family: monospace;
  font-weight: bold;
  font-size: 13pt;
  color: aliceblue;
}

nav a:hover {
  background: #223423;
  color: #f0f1f5;
}

nav ul {
  display: block;
}

nav ul li {
  float: left;
  width: 140px;
  height: 40px;
  line-height: 40px;
  background: teal;
}

nav ul ul li {
  position: relative;
  display: none;
}

nav ul li:hover ul li {
  display: block;
}

相关问题
最新问题