图标不在同一行

Question

我是CSS和HTML的新手，我遇到了容易出问题的问题...... 我使用fontawesome并且图标不是内联的（fa-volume-down和fa fa-music） 无论如何要解决它？感谢您花时间陪我！

以下是JSFiddle上的实例（您可以看到音量图标高于音符图标）

这是我的代码：

<nav class="player">
  <div class="container">
    <div class="d-flex justify-content-between">
      <i class="fa fa-play-circle player_play action"></i>
      <div class="radio_volume">
        <i class="fa fa-volume-down volume_icon"></i>
        <span><i class="fa fa-music radio_icon accent_color"></i>&nbsp;Anison</span>
      </div>
      <i class="fa fa-list-ul radio_select action"></i>
    </div>
  </div>
</nav>

.player{padding:.75rem 1rem;margin-bottom:1rem}
.player_play{font-size:36px}
.radio_icon{padding-right:5px;}
.radio_select{font-size:20px}
.volume_icon{font-size:20px;margin-right:10px}

Answer 1

您可以使用vertical-align正确对齐。

.volume_icon {
    font-size: 20px;
    margin-right: 10px;
    vertical-align: bottom;
}

结果

Answer 2

检查一下，如果有任何错误，请告诉我

<nav class="player">
 <div class="container">
 <div class="d-flex justify-content-between">
  <i class="fa fa-play-circle player_play action"></i>
   <div class="radio_volume">
     <ul>
       <li><i class="fa fa-volume-down volume_icon"></i></li>
       <li><span><i class="fa fa-music radio_icon accent_color">
         </i>&nbsp;Anison</span></li>
     </ul>
    </div>
     <i class="fa fa-list-ul radio_select action"></i>
    </div>
  </div>
</nav>

检查小提琴 https://jsfiddle.net/sygt68ev/1/

Answer 3

概要

• Demo有3个大小的3个例子。

• 不是按font-size设置图标的大小，而是使用了.fa-Nx类。 注意：我使用.fa-1x这不是一个真正的.fa类，我把它放在那里出于对称的奇怪需要¯\ _（ツ）_ /¯< / p>

• 90％的原始布局，类和样式已被删除。

• 2层包裹<i>

  • nav.player display:table
  • div.layer display:table-row

• 所有i.fa和b display:table-cell

• 除了display之外，这些添加的属性也很重要：

  • vertical-align:baseline
  • line-height:1

• 添加了一个功能，可以在播放器组件上切换轮廓，以帮助直观地比较对齐和间距。单击右侧任何播放器的菜单图标。

<强> FIDDLE

演示

/* This just toggles a outline of each player
|| to show how each component is aligned.
|| click any menu icon to the right of player
*/
$('.fa-list-ul').on('click', function(e) {
  $('i,b').toggleClass('grid');
})

.player {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 10px;
}

.layer {
  display: table-row
}

i.fa {
  display: table-cell;
  vertical-align: baseline;
  line-height: 1;
  cursor: pointer
}

.fa-play-circle {
  width: 15%
}

.fa-volume-down {
  width: 15%
}

.fa-music {
  width: 10%;
}

.fa-list-ul {
  text-align: right;
  width: 15%;
}

b {
  display: table-cell;
  text-align: left;
  width: 40%;
  line-height: 1;
  vertical-align: baseline
}

#p3 b {
  font-size: 3em;
}

#p2 b {
  font-size: 2em;
}

#p1 b {
  font-size: 1em;
}

.grid {
  outline: 3px solid cyan
}

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>

<main id='main'>
  <nav id='p3' class="player">
    <div class='layer'>
      <i class="fa fa-play-circle fa-3x"></i>
      <i class="fa fa-volume-down fa-3x"></i>
      <i class="fa fa-music fa-3x"></i>
      <b>Anison</b>
      <i class="fa fa-list-ul fa-3x"></i>
    </div>
  </nav>
  <hr>
  <nav id='p2' class="player">
    <div class='layer'>
      <i class="fa fa-play-circle fa-2x"></i>
      <i class="fa fa-volume-down fa-2x"></i>
      <i class="fa fa-music fa-2x"></i>
      <b>Anison</b>
      <i class="fa fa-list-ul fa-2x"></i>
    </div>
  </nav>
  <hr>
  <nav id='p1' class="player">
    <div class='layer'>
      <i class="fa fa-play-circle fa-1x"></i>
      <i class="fa fa-volume-down fa-1x"></i>
      <i class="fa fa-music fa-1x"></i>
      <b>Anison</b>
      <i class="fa fa-list-ul fa-1x"></i>
    </div>
  </nav>
</main>



<script src="https://cdn.jsdelivr.net/g/jquery@2.2.4,bootstrap@3.3.7"></script>