在同一行居中一个元素并右对齐另一个元素[重复]答案

【问题标题】：Center one element and right-align another on the same row [duplicate]在同一行居中一个元素并右对齐另一个元素[重复]
【发布时间】：2015-12-08 15:36:31
【问题描述】：

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

左边有登录+注册。

右边有两张图片。

我正在尝试将左侧与页面中心对齐，其内容水平对齐，即一行一行。

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

My Fiddle

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

【问题讨论】：

不是一个完整的答案，但在<li>s 上使用display: inline-block 将它们水平对齐
@BenMansley 我在左右 div 上都试过了，但没有成功。
不在 div 上，在实际的 <li> 标签上。 li { display:inline-block; }
你的描述不是很清楚。请添加一张您想要实现的目标的图片。
@Zaqx 在我做一张图片之前得到了答案。对不起。

标签： html css flexbox

【解决方案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

【讨论】：

【解决方案2】：

如果您对学习 flexbox 感兴趣，有一种更好的方法可以实现这一点。（接受的答案相当复杂，并且会在包括手机在内的许多设备上中断。）

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

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

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

【讨论】：