html - 无法使导航栏正常工作

Question

谁能解释一下为什么社交网络图标没有右对齐？我也无法更改 CSS 中的 .hundred 和 .word 类。我试图用两种不同的风格来设计导航栏品牌。 “100”是一种风格，“文字”是另一种风格。这是 jsfiddle:

https://jsfiddle.net/DTcHh/16519/

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
  <div class="navbar-header">
    <a class="navbar-brand" href="#"><h1><span class="hundred">100</span><span class="word">words</span></h1></a>
    <ul class="nav navbar-nav navbar-right social">
      <li><a href="#"><i class="fa fa-2x fa-facebook hidden-xs"></i></a></li>
      <li><a href="#"><i class="fa fa-2x fa-twitter hidden-xs"></i></a></li>
      <li><a href="#"><i class="fa fa-2x fa-instagram hidden-xs"></i></a></li>
      <li><a href="#"><i class="fa fa-2x fa-pinterest hidden-xs"></i></a></li>
    </ul>
  </div>
</div>

谢谢!

Answer 1

放<ul ...>外面<div class="navbar-header">紧随其后:

<div class="navbar-header">
    <a class="navbar-brand" href="#"><h1><span class="hundred">100</span><span class="word">words</span></h1></a>
</div>
<ul class="nav navbar-nav navbar-right social">
    ....
</ul>   

不清楚你想用.hundred做什么和 .word .可能你需要附加 display:inline-block两个类(class)，然后玩padding , 和 <h1>那里不需要。