如何在同一行显示文字？

Question

我正在尝试显示文字＆＃34; RESET＆＃34;在同一条线上，但我无法弄清楚如何做到这一点...我知道这很容易做到，我已经尝试过显示内联，向左浮动，但它不是没有工作。 这是一张可以帮助您的图片：

HTML：

<div id="kolom8">
            <h2>Partners</h2>
            <div id="nav8">
                <li><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a></li>
                <li class="active"><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a></li>
                <li><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a></li>
                <li><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a></li>
                <li><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a></li>
            </div>
            <div id="slider8">
                <a href="#"><img id="back8" src="images/back.png" /></a>
                <a href="#"><img id="forward8" src="images/forward_blue.png" /></a>
            </div>
        </div><!-- end kolom8 -->

CSS：

/* KOLOM 8 */
#kolom8 {
    width: 1440 px;
    height: 185px;
}
#kolom8 h2 {
    margin-bottom: 38px;
}
#nav8 li {
  cursor: pointer;
  margin: 0;
  width: 750px;
  height: 30px;
  line-height: 50px;
  text-align: center;
  list-style-type: none;
  letter-spacing: 4px;
}
#nav8 a {
  color: #7b7979;
  font-size: 25px;
  text-decoration: overline;
  display: inline;

}
span.underlined 
{
  border-bottom: 1px solid black;
}
span.singleunderline 
{
  border-bottom: 1px dashed black;
}
/* KOLOM 8 */

Answer 1

您可以在li元素中使用display: inline。您还可以使用text-align: center到div容器：

＆＃13;

＆＃13;

/* KOLOM 8 */

#kolom8 {
  width: 1440 px;
  height: 185px;
}
#kolom8 h2 {
  margin-bottom: 38px;
}
#nav8 {
  text-align: center;
  }
#nav8 li {
  cursor: pointer;
  margin: 0;
  /*width: 750px;*/
  height: 30px;
  line-height: 50px;
  text-align: center;
  list-style-type: none;
  letter-spacing: 4px;
  display: inline;
}
#nav8 a {
  color: #7b7979;
  font-size: 25px;
  text-decoration: overline;
  display: inline;
}
span.underlined {
  border-bottom: 1px solid black;
}
span.singleunderline {
  border-bottom: 1px dashed black;
}
/* KOLOM 8 */

＆＃13;

<div id="kolom8">
  <h2>Partners</h2>

  <div id="nav8">
    <li><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a>
    </li>
    <li class="active"><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a>
    </li>
    <li><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a>
    </li>
    <li><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a>
    </li>
    <li><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a>
    </li>
  </div>
  <div id="slider8">
    <a href="#">
      <img id="back8" src="images/back.png" />
    </a>
    <a href="#">
      <img id="forward8" src="images/forward_blue.png" />
    </a>

  </div>
</div>
<!-- end kolom8 -->

＆＃13;

＆＃13;

＆＃13;