link 在列表中带来换行符

Question

我对 w3css 有疑问。当我将 link 添加到 w3css 导航栏时，它会带有一个换行符。

<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet">

<div class="w3-bottom" style="margin-bottom: 1px">
  <ul class="w3-navbar w3-red" style="float: clear;">
    <li style="margin-left: 2px">
      Powered by <a href="https://www.w3schools.com/w3css/">w3css</a> and <a href="http://fontawesome.io/">fontawesome</a> |
    </li>
  </ul>
</div>

我希望一切都在一条线上。我希望你能帮助我，谢谢。 :)

//克里皮

Answer 1

这是来自您包含的 W3 css 文件的一段代码

.w3-navbar li a, .w3-navitem, .w3-navbar li .w3-btn, .w3-navbar li .w3-input {
   display: block;
   padding: 8px 16px;
}

如果您将属性上的显示编辑为内联块，那么一切都会如您所愿。

这是代码和示例link

.w3-navbar > li > a {
   display:inline-block !important;
}

您需要“!important”来覆盖他们的样式表，否则它们将具有优先权。

http://codepen.io/hoonin_hooligan/pen/Mpwqwm

Answer 2

您必须将显示：块行为更改为显示：内联行为。（并删除填充以使其看起来不那么奇怪。）我使用 !important 来确保浏览器接受该特定值；您应该用更高特异性的选择器替换它，稍后在页面加载中使用相同的特异性选择器，以便它覆盖旧值或更改当前选择器的 css 文件。

.w3-navbar li a{
  display:inline !important;
  padding: 0px !important;
}

<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-bottom" style="margin-bottom: 1px">
  <ul class="w3-navbar w3-red" style="float: clear;">
    <li style="margin-left: 2px">
      Powered by
      <a href="https://www.w3schools.com/w3css/">
                    w3css
                </a> and
      <a href="http://fontawesome.io/">
                    fontawesome
                </a> |
    </li>
  </ul>
</div>

link 在列表中带来换行符

link in list brings linebreak

css

line-breaks

hyperlink