1

我有一个文本类型的输入字段，我有一个“搜索”按钮。我希望这两个对象水平对齐；按钮尽可能大，输入字段占据其余空间。我整天都在尝试使用 CSS，但无济于事。

我正在使用 RoR，并使用 Bootstrap 库。我想知道是否有任何开箱即用的东西可以使这项工作。我也尝试过使用弹性框，但输入字段似乎有自己的想法。下面是有问题的代码。

<div class="mini-layout fluid">
 <div class="mini-layout-body">
   <h2>Shows</h2>
 </div>
 <div class="mini-layout-sidebar">
   <div class="search_container">
      <input id="search_shows_text" type="text" class="search-query">
      <button id="search_shows_button" 
          type="submit" class="btn btn-primary">Search</button>
  </div>
 </div>
</div>

我已经能够让 search_container 类水平放置东西，但是让它的孩子适当地调整大小已经设法让我一整天都逃脱了。

任何帮助是极大的赞赏。

编辑 感谢 Krishnan 和 SO 社区，我得到了解决方案。以下是其他人的代码。

HTML
搜索

CSS

.search_container
{
  text-align:center;
  margin-top: 5px;
}

.text_area
{
  width: 55%; //Change as per your requirement
  display: inline-block;
  margin: auto;
}

.but_area
{
   width: 25%; //Change as per your requirement
   margin: auto;
}
4

1 回答 1

1

默认情况下，引导程序将文本区域的宽度设置为206像素，将提交按钮设置为 71 像素。因此，为了使其适应您的要求，您必须覆盖这些默认属性。我可能会做这样的事情。

使用自定义属性创建一个类text_area

.text_area
{
   width: 85%; //Change as per your requirement
}

使用自定义属性创建一个类but_area

.but_area
{
   width: 10%; //Change as per your requirement
}

并将在输入文本区域和按钮中使用它。

 <input id="search_shows_text" type="text" class="search-query text_area">
  <button id="search_shows_button" 
      type="submit" class="btn btn-primary but_area">Search</button>

这将使我的文本区域占据 85% 的空间，按钮占据窗口中 10% 的空间，剩余 5% 的空间是空闲的。

于 2013-07-23T06:16:00.830 回答