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

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高效地完成此任务。

#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;
}

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

jsFiddle