Question

我已经获得了大约这个布局代码：

<form class="form">
  <input type="text" placeholder="Enter something!" class="form-control" />
  <input type="submit" class="btn btn-md btn-default" />
</div>

.form {
  max-width: 500px;
  margin: 0 auto;
}

.form input[type="text"] {
  display: inline;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.form input[type="submit"] {
  display: inline;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-top: -4px;
  margin-left: -5px;
}

＆＃13;

body {
  padding: 20px;
}

.form {
  max-width: 500px;
  margin: 0 auto;
}

.form input[type="text"] {
  display: inline;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.form input[type="submit"] {
  display: inline;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-top: -4px;
  margin-left: -5px;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<form class="form">
  <input type="text" placeholder="Enter something!" class="form-control" />
  <input type="submit" class="btn btn-md btn-default" />
</div>

＆＃13;

我希望按钮与文本框位于同一行。但文本框的默认宽度为100%，并将按钮推到下一行。如果不这样做，我怎样才能让文本框扩展到尽可能大？

Answer 1

签出flexbox，您可以指定按钮的宽度，让文本输入增长并填充空间。缺点是它是CSS3功能，因此在旧版浏览器中不受支持。

Answer 2

您可以使用max-width进行文字输入

max-width: 430px;和按钮宽度width: 70px;可以使用容器形式进行调整您也可以使用百分比宽度;

jsfiddle link

Answer 3

没有简单的方法可以做到这一点。最好是给出文本框和按钮百分比宽度。首先摆脱提交按钮上的负边距。然后添加以下样式：

.form input[type="text"] {
    width:80%;
}

.form input[type="submit"] {
    width:17%;
}

缺少3％的原因是表单中的按钮具有很多额外的样式规则，可以添加边框和填充等内容，它们会因浏览器而异。

<强> jsFiddle

展开文本框以填充可用空间

3 个答案: