html - 2 个 div 彼此对齐并在视口(viewport)中居中停止在较小的视口(viewport)中对齐

Question

我有一个使用变换在视口(viewport)中垂直和水平居中的登录框，我想在该登录框旁边添加一个简单的菜单，但在它之外(2 个 div 彼此相邻)。第一个 div(登录框)有一个静态宽度，我使用 float 对齐它们，它有点工作但一旦视口(viewport)宽度变小就停止工作 - 然后 div 被放在另一个下面，即使仍然有空间留在视口(viewport)中。

尽管视口(viewport)宽度不同，我怎样才能让它们保持那样？我还想将侧边菜单垂直居中到登录框。

这是一个非常简单的 fiddle 来说明问题:

body {
  height: 100vh;
  width: 100vw;
}

.center-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.a {
  background-color: red;
  width: 300px; /* increase the width and .b goes under .a */
  height: 60px;
  float: left;
}

.b {
  display: inline-block;
  float: right;
}

<div class="center-container">
  <div class="a">
    Test
  </div>
  <div class="b">
    <ul>
     <li>Li 1</li>
     <li>Li 2</li>
    </ul>
  </div>
</div>

Answer 1

抛弃 float 并检查 flexbox ......你永远不想回去。我经常推荐这个指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

旁注:我在 div.b 标签中添加了 min-width: 70px 并且文本被换行...white-space: nowrap 可能在那里工作嗯

body {
  height: 100vh;
  width: 100vw;
}

.center-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  
}

.a {
  background-color: red;
  width: 600px; 
  height: 60px;
}

.b {
  display: inline-block;
  min-width: 70px
}

<div class="center-container">
  <div class="a">
    Test
  </div>
  <div class="b">
    <ul>
     <li>Li 1</li>
     <li>Li 2</li>
    </ul>
  </div>
</div>