Question

我有两个盒子。一页在左侧，另一页在页面右侧。

左边的那个有登录+注册。

右边有两张图片。

我正在尝试将左边的一个对齐到页面的中心，其内容水平对齐，即一行。

我正在尝试将正确的方框放在页面的右侧，其内容也在一行上。

#topjob {
  width: 100%;
  text-align: center;
}
#left {
  float: left;
  width: 500px;
  height: 50px;
  background: #ff0000;
}
#right {
  width: 100%;
  display: inline-block;
  margin-right: auto;
  margin-left: 100px;
  width: 100px;
  height: 50px;
  background: #00ff00;
}
#center ul li {
  float: right;
  width: 200px;
  height: 50px;
  background: #0000ff;
}

<div class="header_top">
  <!--header_top-->
  <div class="container">
    <div class="row">
    </div>
    <div id="topjob">
      <div id="left">
        <ul>
          <li><a href="#"><i class=""></i>LOGIN</a>
          </li>
          <li><a href="#"><i class=""></i>REGISTER</a>
          </li>
        </ul>
      </div>
      <div id="right">
        <ul>
          <li>
            <a href="index.html">
              <img src="images/mastercard.png" alt="" />
            </a>
            <li>
              <a href="index.html">
                <img src="images/visa.png" alt="" />
              </a>
        </ul>
      </div>
    </div>
  </div>
</div>
</div>

Answer 1

您可以使用CSS Flexbox高效完成此任务。

＆＃13;

#topjob {
  display: flex;                /* make container a flexbox */
  justify-content: center;      /* center child elements ("flex items") */
  position: relative;           /* establish nearest positioned ancestor for
                                   absolute positioning. */
}
#left {
  width: 500px;
  height: 50px;
  background: #ff0000;
}
#right {
  width: 100px;
  height: 50px;
  background: #00ff00;
  position: absolute;            /* remove box from the normal flow */
  right: 2%;                     /* position to the right */
}
#left > ul,
#right > ul {
  display: flex;                /* will align flex items (li) in a row by default */
  justify-content: flex-start;  /* align li's starting from the left edge */
  list-style-type: none;
  padding: 0;
}
#left > ul li,
#right > ul li {
  margin: 10px;
}

＆＃13;

<div id="topjob">
  <div id="left">
    <ul>
      <li><a href="#"><i class=""></i>LOGIN</a></li>
      <li><a href="#"><i class=""></i>REGISTER</a></li>
    </ul>
  </div>
  <div id="right">
    <ul>
      <li>
        <a href="index.html">
          <img src="images/mastercard.png" alt="">
        </a>
        <li>
          <a href="index.html">
            <img src="images/visa.png" alt="">
          </a>
    </ul>
  </div>
</div>

＆＃13;

jsFiddle

Answer 2

如果您对学习flexbox感兴趣，可以采用更好的方法来完成此任务。（接受的答案相当复杂，并将在包括移动电话在内的许多设备上中断。）

＆＃13;

header {
  display: flex;
  align-items: center;
  height: 50px;
  background: gold;
}

nav {
  display: block;
  background: red;
  flex: 1;
}

nav a {
  text-transform: uppercase;
}

nav + div {
  background: lawngreen;
  flex: 0 0 auto;
}

＆＃13;

<header>
      <nav>
          <a href="#">Login</a>
          <a href="#">Register</a>
      </nav>
      <div>
          <img src="images/mastercard.png">
          <img src="images/visa.png">
      </div>
</header>

＆＃13;

我还改进了HTML，使其对屏幕阅读器和搜索引擎更友好。

将一个元素居中并将另一个元素右对齐在同一行上

2 个答案: