将h2和h4左右浮动在相同的线和相同的高度上

Question

所以我只想尝试制作这个标题，左边是h2文字，右边是h4，所以在相同的行和高度，以及一些填充，这是我的代码：

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

.nav {
  clear: both;
}

.nav {
  background-color: grey;
}

<div class="nav">
  <h2 class="alignleft">Left side</h2>
  <h4 class="alignright">RIGHT SIDE</h4>
</div>

这是fiddle，非常感谢任何帮助：

Answer 1

您只需在class属性中编写班级名称，不要在其前面加上点，因此您的代码应为：

<div class="nav">
    <h2 class="alignleft">Left side</h2>
    <h4 class="alignright">RIGHT SIDE</h4>
</div>

并为css添加行高：

.alignleft {
    float: left;
    line-height:25px;
}

.alignright {
    float: right;
    line-height:25px; /*or whatever px's you want*/
}

.nav {
    clear: both;
    background-color: grey;
}

Answer 2

正如@MrGeek所提到的，你应该删除类名上的前缀.。然后，只为h2和h4元素分配相同的行高。

＆＃13;

＆＃13;

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

.nav {
  clear: both;
}

.nav {
  background-color: grey;
}

h2, h4 {
  line-height: 24px;
}

＆＃13;

<div class="nav">
  <h2 class="alignleft">Left side</h2>
  <h4 class="alignright">RIGHT SIDE</h4>
</div>

＆＃13;

＆＃13;

＆＃13;