在不使用列表的情况下将 css 中的顶部导航栏居中

Question

我正在尝试生成 Quora 克隆 UI。 在这样做的同时，我从https://www.w3schools.com/howto/howto_css_searchbar.asp创建了一个顶部导航栏。 现在导航栏放置在整个屏幕上，但我希望导航栏像在 Quora 中一样位于中心而不是整个顶部。 我该怎么做？

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Quora Clone</title>
<script src="myScript.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://kit.fontawesome.com/7586acc430.js"></script>
</head>
<body>

<div class="topnav">
  <a href="home_page.php"><i class="fab fa-quora" ></i>uora</a>
  <a href="home_page.php"><i class="fas fa-home"></i> Home</a>
  <a href="#answer" class="active" ><i class="far fa-edit"></i> Answer</a>
  <a href="#space"><i class="fas fa-users"></i> Spaces</a>
  <a href="#notif"><i class="far fa-bell"></i> Notifications</a>
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Search Quora" name="search">
      <button type="submit"><i class="fas fa-search"></i></button>
    </form>
  </div>
</div>

<div style="padding-left:16px">
  <h2>Responsive Search Bar</h2>
  <p>Navigation bar with a search box and a submit button inside of it.</p>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

</body>
</html>

CSS

@charset "ISO-8859-1";
@import url("https://fonts.googleapis.com/css?family=Lato");
* {box-sizing: border-box;}

body {
  margin: 0;
  font-family: Lato;
}

.topnav {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow:0px 0px 10px #c0c0c0;
}

.topnav a {
  float: left;
  width: 16.67%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
  text-align: center; /* If you want the text to be centered */
  display: block;
  color: #626262;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-bottom: 3px solid transparent;
}

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

.topnav a.active {
  border-bottom: 3px solid red;
  color: red;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 15px;
  border: 1px solid #626262;
  border-radius: 3px;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ffffff;
  color: #626262;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  color: black;
}

@media screen and (max-width: 1500px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
}

矿山产出

Answer 1

.topnav {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translatex(-50%);
    max-width: 70%;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow:0px 0px 10px #c0c0c0;
}

你可以试试这个作为你的.topnav css 我添加了max-width: 70%; 所以它不会是全宽然后使用position fixed; top:0; left: 50%; transform: translatex(-50%); position fixed; top:0; left: 50%; transform: translatex(-50%); 将其固定在屏幕的顶部中央。 如果这对您不起作用，请添加一个片段来展示您当前的输出。

在不使用列表的情况下将 css 中的顶部导航栏居中

问题描述

1 个解决方案

解决方案1
0 2020-08-28 07:32:06

在不使用列表的情况下将 css 中的顶部导航栏居中

问题描述

1 个解决方案

解决方案1 0 2020-08-28 07:32:06

解决方案1
0 2020-08-28 07:32:06