html - 文本不在 html 中显示 Logo 的右侧

Question

您好，在下面的代码中， Logo 文本的右端想要显示，所有三个选项都在一行中。

预期输出:

Logo                               Welcome Guest       Free Register   Login

谁能帮帮我

.logo {
  float: left;
}
.logo a {
  display: block;
}
.header {
  margin: 10px 0;
}
.header-right ul li {
  width: 52%;
  float: right;
}

<div class="header">
  <div class="container">
    <div class="logo">
      <a href="index.html">
        <img src="images/logo.gif" alt="" />
      </a>
    </div>

    <div class="header-right">
      <ul>
        <li>Welcome Guest</li>
        <li>Free Register</li>
        <li>Login</li>
      </ul>
    </div>
    <div class="clearfix"></div>
  </div>
</div>

Answer 1

问题是您要为每个 li 提供 float 和 width。

您想对 ul 执行此操作并将 display: inline-block 给 li。

像这样的..

.logo {
  float: left;
}
.logo a {
  display: block;
}
.header {
  margin: 10px 0;
}
.header-right ul {
  float: right;
  width: 52%;
}
.header-right ul li {
  display: inline-block;
  margin-right: 30px;
}

<div class="header">
  <div class="container">
    <div class="logo">
      <a href="index.html">
        <img src="images/logo.gif" alt="" />
      </a>
    </div>

    <div class="header-right">
      <ul>
        <li>Welcome Guest</li>
        <li>Free Register</li>
        <li>Login</li>
      </ul>
    </div>
    <div class="clearfix"></div>
  </div>
</div>