文字没有在html中显示徽标的右侧

Question

嗨，在下面的代码右侧，徽标文字要显示，并且所有三个选项都在一行中。

预期产出：

Logo                               Welcome Guest       Free Register   Login

任何人都可以帮助我

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

您希望对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>

Answer 2

请尝试以下操作： Demo

.header-right{
    width: 52%;
    float: right;
}

.header-right ul li {
 margin:0 20px;
   display:inline-block;
}

Answer 3

更新您的样式：

.header-right ul {
  width: 52%;
 float: right;
}
.header-right ul li
{display:inline;
 margin-right:15px;
}