Question

所以我正在尝试一些非常简单的事情，但似乎可以解决这个问题。我有两个select个元素，我想在其间水平对齐文本。这就是我所拥有的:(也在codepen）

<div class="row">
  <div class="col-xs-2">
    <select class="form-control input-sm">...</select>
  </div>
  <div class="col-xs-1"> vs </div>
  <div class="col-xs-2">
    <select class="form-control input-sm">...</select>
  </div>
</div>

但是，当我尝试在它们之间添加vs (versus)时，如果我使用的<p>或<div>没有定义类，则第二个select会错位。如果我将vs包裹在div class=col-xs-1中，则间隙太大而且看起来不太好。什么是在vs之间获得select同时保持对齐并且在两个元素之间没有巨大空间的最佳方法

Answer 1

我假设您正在使用Bootstrap查看CodePen。 Bootstrap有一个内联表单类，您可以这样使用：

<canvas width="400" height="250" class="small"></canvas>
<canvas width="600" height="400" class="medium"></canvas>
<canvas width="1000" height="800" class="large"></canvas>

CodePen：http://codepen.io/anon/pen/ZOYjBm

Answer 2

我刚试过CSS

  <div class="row">
  <div class="col-xs-2 field">
  <select class="form-control input-sm">...</select>
  </div>
  <div><span>vs</span></div>
  <div class="col-xs-2 field">
  <select class="form-control input-sm">...</select>
  </div>
  </div>

CSS：

              div{
          display:inline;

        }

    .field{
      position:absolute;
    }

        span{
          position:relative;
          padding:0px;

        }

Bootstrap - 对齐多个选择元素

2 个答案: