Question

我是html和css的新手。我正在尝试创建标题。我需要将徽标图片放在标题的左侧，并在右侧显示导航按钮，但在其旁边的完全相同的级别上，而不是在其下方。

此外，我想知道如何删除导航按钮周围的边距。即使我做了保证金0，他们周围仍然有空格。 我怎样才能做到这一点？这是我到目前为止编写的代码：

#logo {
  margin: 25px 18% 0 50px;
}
nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}
nav li {
  display: inline-block;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Larry Rosenburg Official Website</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <header>
    <div id="logo">
      <img src="lincoln.jpg" width="30%" alt="Lincoln logo">
      <nav>
        <ul>
          <li> <a href="index.html"> Home </a> 
          </li>
          <li> <a href="lincoln.html"> Lincoln </a> 
          </li>
          <li> <a href="about.html"> About </a> 
          </li>
          <li> <a href="contact.html"> Contact </a> 
          </li>
        </ul>
      </nav>
    </div>
  </header>
</body>

<footer>
</footer>

</html>

Answer 1

您要做的第一件事就是让图片和nav包含彼此相邻的链接：

#logo img, #logo nav {
  float: left;
}

然后您需要在nav元素上设置行高。这个高度可能需要根据图像的确切大小而改变：

#logo nav {
  line-height: 100px;
}

我已经创建了一个演示这个的小提琴，可以找到here。

希望这有帮助！

修改

要从徽标中偏移导航栏，您需要做的只是将margin-right添加到#logo img，或margin-left添加到#logo nav，因为他们正在船上漂浮在一起。在这里，我使用了#logo nav，因为它已经有了一个现有的CSS选择器：

#logo nav { line-height: 100px; margin-left: 50px; }

另外，请记住，您已调用容器 div logo - 这实际上包含图像和导航栏。它只是命名，因此它不会影响代码的工作方式，但当您尝试操纵#logo时可能会导致一些混淆;）

有一个新的小提示，显示新的偏移量here：）

Answer 2

CSS

#logo {
    margin: 25px 18% 0 50px;
}
nav ul {
    list-style: none;
    margin: 0 10px;
    padding: 0;
    display:table;
    border:solid 1px #ddd;
}
nav li {
    display: table-cell;
}
nav li:not(:first-child) {
    padding:0 15px;
    background:#eee;
    position:relative;
    vertical-align:middle;
}

html

<header>
<div id="logo">
  <nav>
    <ul>
      <li><img src="lincoln.jpg" alt="Lincoln logo"></li>   
      <li> <a href="index.html"> Home </a> 
      </li>
      <li> <a href="lincoln.html"> Lincoln </a> 
      </li>
      <li> <a href="about.html"> About </a> 
      </li>
      <li> <a href="contact.html"> Contact </a> 
      </li>
    </ul>
  </nav>
</div>
</header>

demo

Answer 3

你可以简化它。除非是强制性的，否则尽量不要使用内联样式。

＆＃13;

#logo {
  margin: 0;
  float: left;
  width: 30%;
}

nav ul{
  list-style: none;
  width: 70%;
}

nav li{
  display: inline;
}

#header { 
  width: 100%; 
  display: inline;
}

＆＃13;

<div id="header">
  <div id="logo">
    <img src="lincoln.jpg" alt="Lincoln logo">
  </div>
    <nav>
      <ul>
        <li> <a href="index.html"> Home </a> </li>
        <li> <a href="lincoln.html"> Lincoln </a> </li>
        <li> <a href="about.html"> About </a> </li>
        <li> <a href="contact.html"> Contact </a> </li>
      </ul>
    </nav>
</div>

＆＃13;

Answer 4

您需要float:left #logo img并添加一些余量以将其与链接分开

像这样的东西

＆＃13;

#logo {
  margin: 25px 18% 0 50px;
}
#logo img {
  float: left;
  margin-right: 10px
}
nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
  float: right;
}
nav li {
  display: inline-block;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Larry Rosenburg Official Website</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <header>
    <div id="logo">
      <img src="lincoln.jpg" width="30%" alt="Lincoln logo">
      <nav>
        <ul>
          <li> <a href="index.html"> Home </a> 
          </li>
          <li> <a href="lincoln.html"> Lincoln </a> 
          </li>
          <li> <a href="about.html"> About </a> 
          </li>
          <li> <a href="contact.html"> Contact </a> 
          </li>
        </ul>
      </nav>
    </div>
  </header>
</body>

<footer>
</footer>

</html>

＆＃13;

如何使导航按钮与标题中的徽标图片处于同一级别？

4 个答案: