Question

我希望我的导航链接在我尝试的固定导航栏中居中添加填充但不知何故导航扩展。我也尝试垂直对齐，但这并没有做太多。我对CSS很陌生，所以如果再次发生这种情况，解释会有所帮助

HTML 的

`<html>
<html>
    <head>
        <title>Photography | Home </title>
        <link href="app.css" rel="stylesheet"/>
        <script type="application/javascript" src="on.js"></script>
    </head>
    <body>

        <header>
            <div id="branding">
                <h2>PHOTOGRAPHY</h2>
            </div>
            <nav id="links">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">PHOTO GALLERY</a></li>
                <li><a href="#">VIDEO GALLERY</a></li>
            </ul>
                </nav>
        </header>
        <section id="showcase">
            <div class="container">
            <h2>Photography</h2>
            <p>Our photo's are always presente in the best
                quality possible with carefulness
            </p>
            </div>
        </section>
        <section class="boxes">
            <div class="container">
                <div class="box">asdasdsada
                    <img src="./images/CameraIcon.png">
                    <h2>Photography</h2>
                    <p>Our photographers will always find the perfect photo whether it is a simple click to a full on video</p>
                </div>
                      <div class="box">
                            <img src="./images/CommunityICON.jpg">
                            <h2>Guranteed!</h2>
                            <p>If you are not satisfied with our work you will have an 80% refund</p>


                </div>
                      <div class="box">
                            <img src="./images/TimeIcon.png">
                            <h2>Time Managment</h2>
                            <p>Time management is a crucial step so we are always trying our best to finish up the work quickly, but surely</p>

                </div>
            </div>
        </section>
        <footer>
            <p>Note that any copyright &copy; is reserved</p>
        </footer>
    </body>
</html>`

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
    padding: 0;
}
.container {
    width: 80%;
    margin: auto;
    overflow: hidden
}
header {
    background-color: #191919;
    position: fixed;
    width: 100%;
    color: #edf9ff;
    min-height: 70px;
    border-bottom: #0fe216 3px solid;
    padding-top: 30px;
}
header a {
    text-decoration: none;
    text-transform: uppercase;
}
header ul {
    margin: 0;
}
header li {
    list-style-type: none;
    float:right;
    text-align: center;
    padding-right: 20px;
}
nav {
    text-align: center;
}

Answer 1

我会使用import KeychainAccess let keychain = Keychain(service: "com.myservice.myapp") //when a user buys call this: self.keychain["hasBoughtAcceess"] = "yes" //to check if user has bought: if(self.keychain["hasBoughtAccess"] == "yes") { print("user has bought") } else { print("user has not bought") }。这让这很容易。使用display: flex垂直居中，align-items: center;将徽标与导航分开。然后我也会漂移你的导航justify-content: space-between的左边，所以它们是有序的。你也可以在那里使用li，但不是必需的。

flex

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden
}

header {
  background-color: #191919;
  position: fixed;
  width: 100%;
  color: #edf9ff;
  min-height: 70px;
  border-bottom: #0fe216 3px solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header a {
  text-decoration: none;
  text-transform: uppercase;
}

header ul {
  margin: 0;
}

header li {
  list-style-type: none;
  float: left;
  text-align: center;
  padding-right: 20px;
}

nav {
  text-align: center;
}

链接不在固定导航中

1 个答案: