Question

我想要这样的事情：

+-------------------------------------------------------------------+
|                                                                   |
| LOGO                           Search_box... ITEM_1 ITEM_2 ITEM_3 |
|                                                                   |
+-------------------------------------------------------------------+

LOGO是一张图片。 Search_box是input text和ITEM_X orizontally列表项。

我尝试了这个，但徽标并没有停留在我想要的地方：https://jsfiddle.net/mna4de2n/

注意：我还没有实现input text。

CSS：

header{
    width: 100%;
    height: auto;
    text-align: center;
    display: inline-block;
}

header ul {
    list-style-type: none;
    text-align: center;
    padding: 0.5vw;
    overflow: hidden;
}

header li {
   display: inline;
}

header li a{
    display: inline-block;
    color: #262626;
    text-align: center;
    padding: 0.5vh 0.5vw;
    text-decoration: none;
}

header .left {
    padding-left: 15%;
    float: left;
}

header .right {
    float: right;
    padding-right: 25%;
}

header img {
  width: 10%;
}

HTML：

<header>
    <div class="left">
      <li><img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png"></li>
    </div>
    <div class="right">
      <ul>
        <li><a class="active" href="#home">Matcha</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
        </ul>
    </div>
</header>

Answer 1

为什么不使用flexbox？

＆＃13;

header {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}

header img {
  width: 50%;
}

header .left {
  width: 30%;
}

header .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
}

header ul {
  list-style-type: none;
  padding: 0.5vw;
  overflow: hidden;
  display: flex;
}

header li a {
  color: #262626;
  padding: 0.5vh 0.5vw;
  text-decoration: none;
}

header input {
  height: 30px;
  align-self: center;
}

＆＃13;

<header>
  <div class="left">
    <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
  </div>
  <div class="right">
    <input type="search">
    <ul>
      <li><a class="active" href="#home">Matcha</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </div>
</header>

＆＃13;

Answer 2

<header>

<div class="right">
  <ul>
    <li><a class="active" href="#home">Matcha</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    </ul>
</div>



<div class=""> <!-- You do not need this class here, now all you need to do is work on centering your menu. -->
 <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>

我在右侧浮动菜单后移动了您的徽标。并从徽标和该div的类中删除了li标签（不需要向左浮动。）。

Answer 3

您需要将图像宽度设置为像素，而不是percentage，这会使图像的父级占据标题的整个宽度。这导致了这个问题。同时删除包裹图像的li标记，因为它没用。

<强>之前：

header img {
  width: 10%;
}

<div class="left">
    <li><img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png"></li>
</div>

<强>后：

header img {
  width: 100px;
}

<div class="left">
    <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>

注意：请全屏查看演示以查看更改。

＆＃13;

header {
  width: 100%;
  height: auto;
  text-align: center;
  display: inline-block;
}

header ul {
  list-style-type: none;
  text-align: center;
  padding: 0.5vw;
  overflow: hidden;
}

header li {
  display: inline;
}

header li a {
  display: inline-block;
  color: #262626;
  text-align: center;
  padding: 0.5vh 0.5vw;
  text-decoration: none;
}

header .left {
  padding-left: 15%;
  float: left;
}

header .right {
  float: right;
  padding-right: 25%;
}

header img {
  width: 100px;
}

＆＃13;

<header>
  <nav>
    <div class="left">
      <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
    </div>
    <div class="right">
      <ul>
        <li><a class="active" href="#home">Matcha</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </div>
  </nav>
</header>

＆＃13;

Answer 4

我将li保留在ul下，而不是div，并将图像大小更改为像素。

<div class="left">
          <ul>
            <li>
              <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
            </li>
          </ul>

        </div>

header {
  width: 100%;
  height: auto;
  text-align: center;
  display: inline-block;
}

.left ul{
  padding:0;
}

header ul {
  list-style-type: none;
  text-align: center;
  padding: 0.5vw;
  overflow: hidden;
}

header li {
  display: inline;
}

header li a {
  display: inline-block;
  color: #262626;
  text-align: center;
  padding: 3vh 0.5vw;
  text-decoration: none;
}

header .left {
  padding-left: 15%;
  float: left;
}

header .right {
  float: right;
  padding-right: 25%;
}

header img {
  width: 80px;
}

<header>
  <nav>
    <div class="left">
      <ul>
        <li>
          <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
        </li>
      </ul>

    </div>
    <div class="right">
      <ul>
        <li><a class="active" href="#home">Matcha</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </div>
  </nav>
</header>

图片未保持正确位置

4 个答案: