Question

如何设置我的导航和标题的位置看起来像这样？

我一直在尝试搜索谷歌和堆栈溢出，但无法找到任何东西。

这是我的代码，谢谢。

＆＃13;

body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}

#wrap { margin: 0 auto; width: 700px; }

#header{

}


ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #000000;
text-decoration: none;
font-size: 25px;
}

li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #ffdc99;
}

#content{
background: #ffffff;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: bottom;
}

/* Edits */
#header,
#content{ clear: both; }

#header,
#header h1,
#header #nav { float: left; }

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gullible</title>
  <link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>

<div id="wrap">

    <div id="logo">
        <h1>Gullible</h1>
        <ul id="nav">
            <li><a href="home.html">Home</a></li>
            <li><a href="shop.html">Shop</a></li>
            <li><a href="home.html">Visit</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>

    <div id="content">
        <h1></h1>
    </div>

</div>

  <footer>
  <h2>Gullible</h2>
    <ul>
      <li>Home</li>
      <li>Shop</li>
      <li>Visit</li>
      <li>Contact</li>
    </ul>
  </footer>
</body>
</html>

＆＃13;

Answer 1

尝试 Flexbox 和justify-content: space-around;

Flex项目均匀分布，以便两个相邻项目之间的空间相同。第一个项目之前和最后一个项目之后的空白空间等于两个相邻项目之间空间的一半。

ul {
  display: flex;
  list-style-type: none;
  justify-content: space-around;
  align-items: center;
  border-bottom: 2px solid black;
  padding: 0;
}

.logo {
  font-size: 30px;
  font-weight: bold;
  padding: 10px 0;
}

a {
  text-decoration: none;
  color: black;
}

<ul>
  <li><a href="">LINK</a></li>
  <li><a href="">LINK</a></li>
  <li class="logo"><a href="">LOGO</a></li>
  <li><a href="">LINK</a></li>
  <li><a href="">LINK</a></li>
</ul>

Answer 2

只需将<h1>置于新<li>内置于现有<ul id="nav"> <li><a href="home.html">Home</a></li> <li><a href="shop.html">Shop</a></li> <li><h1>Gullible</h1></li> <li><a href="home.html">Visit</a></li> <li><a href="contact.html">Contact</a></li> </ul>的中心即可。

{{1}}

Answer 3

在这里，您将找到一个如何实现https://jsfiddle.net/5czgjkyj/

的示例

<!DOCTYPE html>
<body>
  <div id="wrap">
    <div id="logo">
      <ul id="nav">
        <li><a href="home.html">Home</a></li>
        <li><a href="shop.html">Shop</a></li>
        <li><h1>Gullible</h1></li>
        <li><a href="home.html">Visit</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>

    <div id="content">
      <h1></h1>
    </div>
  </div>

  <footer>
    <ul>
      <li>Home</li>
      <li>Shop</li>
      <li><h2>Gullible</h2></li>
      <li>Visit</li>
      <li>Contact</li>
    </ul>
  </footer>
</body>

CSS

ul {
  text-align: center;
}

ul li {
  display: inline-block;
}

如何将我的标题放在导航中间？

3 个答案: