Question

我正在创建一个需要顶部导航栏的html代码。我已经有一个，但它并没有完全显示我想要的样式。我希望说家的顶部和即将居中的中心，与我们联系的顶部在右侧。当前，顶部导航没有响应。如果我在移动设备上，我希望顶部的导航栏具有burger（三行）图标在右侧，并且单击该图标时，它将具有全屏导航。最后，我希望与我们联系。谢谢。

HTML

<div class="header">
    <div class="headerlist">
        <h2 id="name">Sprinkler<span id="blue">System</span></h2>
        <div class="top-head">
            <ul>
                <li><a href="" id="contact">Contact Us</a></li>
                <li><a href="">About</a></li>
                <li id="home"><a href="">Home</a></li>
            </ul>
        </div>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    background-color: white;
}

.headerlist {
    position: absolute;
    background-color: white;
    display: inline;
    width: 99.5%;
    opacity: 0.8;
    z-index: 6;
    margin: 0px;
}

#name {
    font-size: 16px;
    font-style: normal;
    float: left;
    margin-left:180px;
    top: 4px;
    position: relative;
}

.headerlist {
    position: absolute;
    background-color: white;
    display: inline;
    padding-right: 160px;
    width: 98.9%;
    opacity: 0.99;
    z-index: 6;
    padding-top: 20px;
    top: -10px;
    font-size: 16px;
}

.headerlist ul {
    list-style-type: none;
    float: right;
    margin-top: 20px;

}

.headerlist ul a {
    text-decoration: none;
    float: right;
    color: black;
    /* margin-left: 20px; */
    margin-right: 100px;
    font-size: 15px;
}

.headerlist ul {
   /*  text-align: center;
    margin-left: 0 auto;
    margin-right: 0 auto;
    width: 75%;
    position: fixed;
    left: 50%;
    margin-left: -37.5%; */
}

.headerlist ul a:hover {
    line-height: 1;
}

li {
    display: inline;
}

.body {
    margin-left: 180px;
}

.headerlist {
    padding-top: 6px;
    padding-bottom:0px;
    border-bottom: 1px solid rgb(239, 239, 239);
}

#blue {
    color: rgb(38, 99, 242);
}

.huge {
    font-size:90px;
    font-weight: 900;
}

#contact {
    background:blue;
    border-radius:5%;
    padding:10px;
    color:white
}

Codepen：https://codepen.io/masonhorder/pen/GLGWXe

Answer 1

好吧，我尝试使用引导程序解决此问题：看看codepen。

https://codepen.io/dupinderdhiman/pen/GLGOgN

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

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

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

</body>
</html>

Answer 2

//html5

<header>
  <h2 id="name">Sprinkler<span id="blue">System</span></h2>
  <nav>
    <li><a href="" id="contact">Contact Us</a></li>
                <li><a href="">About</a></li>
                <li id="home"><a href="">Home</a></li>
  </nav>
  <div class="icon">=</div>
</header>

// css3

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  margin: 0;
  padding: 0;
}
header {
  display: flex;
  justify-content: space-around;
  height: 100px;
}
h2 {
  flex: 1;
  text-align: center;
}
nav {
  display: flex;
  flex: 1;
  justify-content: space-evenly;
}

nav li {
  list-style: none; 
}

.icon {
  display: none;
}

@media screen and (max-width: 500px) {
  nav {
    display: none;
  }
  .icon {
    display: block;
    flex: 1;
    text-align: center;
  }
}

// JS
var domElemIcon = document.querySelector('.icon'),
   domElemList = document.querySelector('nav'),
   domElemTitle = document.querySelector('h2') 

domElemIcon.onclick = function() {
  domElemIcon.style.display = 'none';
  domElemTitle.style.display = 'none';
  domElemList.style.display = 'block';
}

我不知道这是否是您想要的，您可以尝试运行并查看结果。

如何响应将标题/顶部导航中的元素对齐到中心

2 个答案: