Question

我使用boostrap模板（Dreamweaver）创建我的网站。我想通过从菜单图标上删除边框并更改链接的位置来编辑导航菜单。我该如何实现？

@charset "utf-8";
html {
  position: relative;
  min-height: 100%;
}

body {
	margin-bottom: 60px; /* Margin bottom by footer height */
	padding: 0;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
	color: #FFFFFF !important;
	background: #000000;
}

.logo {
	width: 100px;
	height: 25px;
	margin-top: 10px;
}

.navbar {
	padding: 10px;
	background-color: #151515;
	border-radius: 0px;
	border-color: #1a1919;
}

li {
	margin-right: 10px;
}



a {
	color: #FFFFFF !important;
}

a:hover {
	color: #5e5e5e !important;
}

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid"> 
    
	  <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
		
	  <a href="index.html">	
      <img class="logo" alt="logo" src="img/Logo White.png">
	  </a>
	  </div>
		  
	<div class="collapse navbar-collapse" id="defaultNavbar1">
    <ul class="nav navbar-nav navbar-right">
	  <li><a href="index.html">HOME</a></li>
	  <li><a href="about.html">ABOUT</a></li>
      <li><a href="work.html">WORK</a></li>
      <li><a href="contact.html">CONTACT</a></li>
      </ul>
    </div>
	</div>
</nav>

Answer 1

li {
    list-style: none; /* removes the bubble */
    text-align: center; /* centers the text */
    margin-left: #; /*offsets the bubble placement a bit due to the li tag */
}

我个人使用单独的div标签用于列表项，并自己创建列表以提高可操作性；例如，text-align：center;不需要补偿。

对于按钮：不需要在按钮上设置单独的类，但是为了简单起见可以有效，然后添加

border: none; /*removes the border*/

Answer 2

要从菜单列表项中删除气泡，可以在列表中使用list-style: none;。
要将列表菜单项放置在中心，也可以在列表中使用text-align: center;。
用于删除您可以在菜单图标中使用text-decoration: none; 锚点。

@charset "utf-8";
    html {
     position: relative;
     min-height: 100%;
    }
    body {
     margin-bottom: 60px; /* Margin bottom by footer height */
     padding: 0;
     font-family: 'Montserrat', sans-serif;
     text-transform: uppercase;
     color: #FFFFFF !important;
     background: #000000;
    }
    .logo {
     width: 100px;
     height: 25px;
     margin-top: 10px;
    }
.navbar {
     padding: 10px;
     background-color: #151515;
     border-radius: 0px;
     border-color: #1a1919;
    }
    li {
     margin-right: 10px;
     list-style: none; /* removes the bubble */
     text-align: center; /* centers the text */
    }
    a {
     color: #FFFFFF !important;
     text-decoration: none;
    }
    a:hover {
     color: #5e5e5e !important;
    }

    <nav class="navbar navbar-default">
     <div class="container-fluid"> 
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
        <a href="index.html">	
    	 <img class="logo" alt="logo" src="img/Logo White.png">
        </a>
      </div>  
      <div class="collapse navbar-collapse" id="defaultNavbar1">
       <ul class="nav navbar-nav navbar-right">
         <li><a href="index.html">HOME</a></li>
         <li><a href="about.html">ABOUT</a></li>
         <li><a href="work.html">WORK</a></li>
         <li><a href="contact.html">CONTACT</a></li>
       </ul>
      </div>
    </div>
</nav>

如何使用HTML / CSS创建响应式导航？

2 个答案: