Question

我试图为我正在处理的新项目制作navbar。

我希望navbar包含网站标题，即h1和菜单项，但是当我尝试这样做时，它不会同时生成h1 1}}和ul在同一行。

我想要导航栏项和导航栏＆＃34;标题＆＃34;在同一高度和同一条线上对齐，而不是不能组合在一起的不同块。

＆＃13;

html, body {
  width: 100 % ;
  padding: 0;
  margin: 0;
  font - family: 'Roboto',
    sans - serif;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
}

.main - title {
  text - align: center;
  margin - top: 20 px;
  margin - bottom: 2 px;
}

header {
  border - bottom: 2 px solid grey;
}

ul {
  padding: 0;
  margin: 0;
}

.nav - ul {
  list - style - type: none;
  float: right;
  margin - right: 50 px;
  display: inline - block;

}

.navbar - title > h1 {
  text - align: center;
  margin - top: 20 px;
}

.nav - ul > a: visited, a: link {
  text - decoration: none;
  color: black;
  font - size: 1.5e m
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Raspberry pi projects</title>
  <link rel="stylesheet" href="assets/css/main.css">

  <!-- JQUERY CDN -->
  <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"></script>

  <!-- LOADING SCREEN SCRIPT -->
  <!--<script type="text/javascript" src="assets/js/load.js"></script>-->

  <!-- ROBOTO FONT -->
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,900,100italic,300italic,500,300,700,400italic,700italic,500italic,100&subset=latin,greek-ext,latin-ext' rel='stylesheet' type='text/css'>

</head>

<body>
  <nav>
    <div>
      <div class="nav-brand">
        <a href="#" class="navbar-title"><h1>Raspberry pi projects</h1></a>
      </div>

      <div class="nav-list">
        <ul class="nav-ul">
          <li class="nav-item">
            <a href="#">Submit a project</a>
          </li>

        </ul>

      </div>
    </div>
  </nav>


  <script src=""></script>
</body>

</html>

＆＃13;

Answer 1

默认情况下，

h1标记为display:block，这意味着它们占用了100％的宽度。您可以将display:inline-block添加到.nav-brand和.nav-list：

来更改此设置

html, body {
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

h1,h2,h3,h4,h5 {
  margin: 0;
  padding: 0;
}

.main-title {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 2px;
}

header {
  border-bottom: 2px solid grey;
}

ul {
  padding: 0;
  margin:0;
}

.nav-brand, .nav-list {
  display:inline-block;
}

.nav-ul {
  list-style-type: none;
  float:right;
  margin-right: 50px;
  display: inline-block;

}

.navbar-title > h1 {
  text-align: center;
  margin-top: 20px;
}

.nav-ul > a:visited, a:link {
  text-decoration: none;
  color: black;
  font-size: 1.5em
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Raspberry pi projects</title>
  <link rel="stylesheet" href="assets/css/main.css">
  
  <!-- JQUERY CDN -->
  <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"></script>
  
  <!-- LOADING SCREEN SCRIPT -->
  <!--<script type="text/javascript" src="assets/js/load.js"></script>-->
  
  <!-- ROBOTO FONT -->
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,900,100italic,300italic,500,300,700,400italic,700italic,500italic,100&subset=latin,greek-ext,latin-ext' rel='stylesheet' type='text/css'>
  
</head>

<body>
  <nav>
    <div>
      <div class="nav-brand">
        <a href="#" class="navbar-title"><h1>Raspberry pi projects</h1></a>
      </div>

      <div class="nav-list">
        <ul class="nav-ul">
          <li class="nav-item">
            <a href="#">Submit a project</a>
          </li>

        </ul>

      </div>
    </div>
  </nav>
  
  
  <script src=""></script>
</body>
</html>

带有＆＃34;品牌＆＃34;的HTML和CSS Horizontar导航栏

1 个答案:

带有＆＃34;品牌＆＃34;的HTML和CSS Horizo​​ntar导航栏

1 个答案:

带有＆＃34;品牌＆＃34;的HTML和CSS Horizontar导航栏