小编Eya*_*ush的帖子

我的网站上有一个表单，我想在同一行上放置一个按钮和选择标记，但它一直导致换行。我试过一个按钮，它在一条线上一个接一个地工作得很好。我正在使用引导程序 3。

<div class="panel-footer" style ="overflow: hidden; white-space: nowrap;">
    <button type="submit" class="btn btn-success" style="width:100px; margin:4px;">send</button> 
    <button type="submit" class="btn btn-success" style="width:100px; margin:4px;">send</button> 
    <select class="form-control" style = "width:100px; margin:4px;">
        <option value="volvo">Math</option>
        <option value="saab">History</option>
        <option value="opel">English</option>
        <option value="audi">Gymnastics</option>
    </select>
</div>

有足够的空间可以在线上再进行 4 次选择。

我想要实现这个目标:

我找不到类似的东西,但这是我失败的尝试:

#one {
  width: 200px;
  height: 100px;
  background-color: white;
  box-shadow: 0px 0px 20px #2D8DBD;
  left: 50px;
  display: inline-block;
  margin-right: -100px;
}
#two {
  width: 200px;
  height: 100px;
  background-color: white;
  box-shadow: 0px 0px 20px #B22D2D;
  left: -50px;
  display: inline-block;
  margin-left: -50px;
  z-index: -1;
}

<center>
  </br>
  </br>
  <div id="one"></div>
  <div id="two"></div>
</center>

jsFiddle演示.

我正在使用bootstrap,所以我不认为只是制作另一个"渐变"图像会更简单.

此外,我尝试妥协:http://designposts.net/fresh-free-css3-and-html5-tutorials/但我的图像被圈起来,所以它原来是一个切割方块.