Question

我想要一个带有徽标的导航栏，但是当我添加徽标时，这条线看起来不太好！

问题是当我将图片添加到图片时，文字不会停留在同一行！不是说换行了，而是文字滑了一会儿它不应该。

body {
  background-color: #C8F1BA;
  margin: 0px;
}
div#gnb_bg {
  margin: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-right: 10px solid black;
}
a.gnb {
  background-color: #99FF33;
  text-decoration: none;
  font-size: 26px;
  border-right: 1px solid #448811;
  padding-right: 2.5%;
  padding-left: 2.5%;
  padding-top: 14px;
  padding-bottom: 14px;
  margin: 0px;
}
img#gnb_logo {
  height: 30px;
  margin: 10px;
}
nav#gnb {
  text-align: center;
  background-color: #99FF33;
  height: 50px;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <nav id="gnb" role="navigation" aria-label="Global Navigation">
    <div id="gnb_bg">
      <a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
      <img id="gnb_logo" src="../images/logo.gif" />
    </div>
  </nav>
</body>

Answer 1

对于初学者，我们需要整理你的HTML。

然后查看你的<a>你的css，如果你正在使用填充等，你需要将它作为块级元素。

从你的导航中移除50px的高度，这不是你想要给予高度的东西。而是使用<a>的填充来获得所需的高度，这有助于响应。

但是因为我们希望它位于您的图片旁边，请使用inline-block

也不要使用CSS来定义标签的高度和宽度，你应该使用标签属性，以便渲染顺利进行。

您还需要在图片上使用alt。

您的图片还需要以下css规则：

img#gnb_logo {
vertical-align:middle;
margin:0 10px;
}

这样它就可以按照你想要的方式放在链接旁边。

此外，如果这是您网站的徽标，则不应位于<nav>

内

如果它是相对于该链接的图标，则使用<img>而不是background-image使用body { background-color: #C8F1BA; margin: 0px; } ul, li { list-style: none; } div#gnb_bg { margin: 0px; padding-top: 0px; padding-bottom: 0px; border-right: 10px solid black; } a.gnb { background-color: #99FF33; text-decoration: none; font-size: 26px; border-right: 1px solid #448811; padding-right: 2.5%; padding-left: 2.5%; padding-top: 14px; padding-bottom: 14px; margin: 0px; display: inline-block; } img#gnb_logo { vertical-align:middle; margin:0 10px; } nav#gnb { text-align: center; background-color: #99FF33; }

＆＃13;

<header>
  <nav id="gnb" role="navigation" aria-label="Global Navigation">
    <ul id="gnb_bg">
      <li>
        <a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
        <img id="gnb_logo" src="../images/logo.gif" height="30" alt="GNB Logo" />
      </li>
    </ul>
  </nav>
</header>

＆＃13;

{{1}}

＆＃13;

Answer 2

如果您向vertical-align: middle和a.gnb添加img#gnb_logo，则可能会解决您的问题。

注意链接上的顶部/底部填充，使其溢出分配给父容器的50px高度。

body {
  background-color: #C8F1BA;
  margin: 0px;
}
div#gnb_bg {
  margin: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-right: 10px solid black;
}
a.gnb {
  background-color: #99FF33;
  text-decoration: none;
  font-size: 26px;
  border-right: 1px solid #448811;
  padding-right: 2.5%;
  padding-left: 2.5%;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0px;
  vertical-align: middle;
}
img#gnb_logo {
  height: 30px;
  margin: 10px;
  vertical-align: middle;
}
nav#gnb {
  text-align: center;
  background-color: #99FF33;
  height: 50px;
}

<nav id="gnb" role="navigation" aria-label="Global Navigation">
  <div id="gnb_bg">
    <a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
    <img id="gnb_logo" src="http://placehold.it/100x50" />
  </div>
</nav>

Answer 3

如果要在内联标记（如“a”标记）上渲染填充，首先您的a.gnb类应该有一个显示块。如果你想让它适合50px高度的容器（14px + 14px填充顶部和底部+ 22px线高等于50px），你的行高必须是22px 其次，要使图像对齐，只需将vertical-align: middle添加到img#gnb_logo规则：

body {
    background-color: #C8F1BA;
    margin: 0px;
    padding: 0px;
}
div#gnb_bg{
    margin:0px;
    padding-top:0px;
    padding-bottom:0px;
    border-right:10px solid black;
}
a.gnb{
    background-color: #99FF33;
    text-decoration: none;
    font-size:26px; 
    border-right:1px solid #448811;
    padding-right:2.5%;
    padding-left:2.5%;
    padding-top:14px;
    padding-bottom:14px;
    margin:0px;
    line-height: 22px;
    display: inline-block;
}
img#gnb_logo{
    height:30px;
    margin:10px;
    vertical-align: middle;
}
nav#gnb{
    text-align:center;
    background-color: #99FF33;
    height: 50px;
}

Answer 4

您需要删除保证金。

img#gnb_logo{
height:30px;
margin:0px;
}

查看现场演示。

body {
background-color: #C8F1BA;
margin: 0px;
}

#gnb{
    padding:10px;
}
div#gnb_bg{
margin:0px;
padding-top:0px;
padding-bottom:0px;
border-right:10px solid black;
}
a.gnb{
background-color: #99FF33;
text-decoration: none;
font-size:26px; 
border-right:1px solid #448811;
padding-right:2.5%;
padding-left:2.5%;
padding-top:14px;
padding-bottom:14px;
margin:0px;
}
img#gnb_logo{
height:30px;
}
nav#gnb{
text-align:center;
background-color: #99FF33;
height: 50px;
}

<nav id="gnb" role="navigation" aria-label="Global Navigation">
    <div id="gnb_bg">
    <a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
    <img id="gnb_logo" src="http://placehold.it/100x50"/>
    </div>
</nav>

Answer 5

<!DOCTYPE html>
<html>

<head>
<style>
body {
  background-color: #C8F1BA;
  margin: 0px;
}

a.gnb {
  text-decoration: none;
  font-size: 26px;
  border-right: 1px solid black;
  vertical-align: middle;
  padding-right: 1%;
  padding-left: .2%;
  padding-top: 5px;
  padding-bottom: 5px;
}
img#gnb_logo {
  height: 30px;
vertical-align: middle;
margin:5px 0px;

}
nav#gnb {
  text-align: center;
  background-color: #99FF33;
  height: 40px;
}
</style>
</head>

<body>
  <nav id="gnb" role="navigation" aria-label="Global Navigation">
    <div id="gnb_bg">
      <img id="gnb_logo" src="http://placehold.it/100x50" />
      <a class="gnb" href="../feedbacks/feedbacks.html">Website</a>
    </div>
  </nav>
</body>

导航栏中的徽标和文本对齐方式

5 个答案: