一行输入文字提交

Question

如何在不使用 float: left 的情况下实现这种效果（交叉浏览）？

我需要将这个 form 居中，所以 float 属性对我来说是错误的。有人可以帮忙吗？

我已经编写了如下代码。

我的代码：

footer input[type=text] {
  border-top: 1px solid #efefef;
  border-left: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  border-right: 0;
  width: 230px;
  padding: 0 10px;
  font-size: 16px;
  line-height: 18px;
  height: 35px;
  display: inline-block;
  float: left;
  margin: 0 auto;
}
footer input[type=submit] {
  border: 1px solid #df242b;
  background: #df242b url('../../../gfx/submit.jpg') no-repeat center center;
  color: #fff;
  width: 38px;
  height: 37px;
  font-size: 18px;
  line-height: 18px;
  cursor: pointer;
  display: inline-block;
  float: left;
  margin: 0 auto;
}

Answer 1

因为你想要它跨浏览器而不使用 float:left，你可以使用 inline-block 和 vertical-align:top

要居中，您需要将 margin:0 auto 应用到 footer，并用一些 width 代替

我对您的代码做了一些调整。

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0;
  /* demo */
  background: lightgreen
}
footer {
  /*fix inlin block gap */
  font-size: 0;
  margin: 0 auto;
  width: 265px; /* 230px + 35px */
}
footer input {
  line-height: 18px;
  height: 35px;
  display: inline-block;
  vertical-align: top;
}
footer input[type=text] {
  border: solid #efefef;
  border-width: 1px 0 1px 1px;
  width: 230px;
  padding: 0 10px;
  font-size: 16px;
}
footer input[type=submit] {
  border: 1px solid #df242b;
  background: #df242b url('//dummyimage.com/35x35') no-repeat center center;
  color: #fff;
  width: 35px;
  font-size: 18px;
  cursor: pointer
}

<footer>
  <input type="text">
  <input type="submit">
</footer>

Answer 2

没有 float:left 的代码实际上工作正常。也许您在小尺寸屏幕上体验过换行。如果是这种情况，只需像本示例一样为您的页脚添加一块 CSS。

footer {
   white-space: nowrap;
   text-align: center;
}

footer input[type=text] {
      border: 1px solid #efefef;
      border-right: 0;
      width: 230px;
      padding: 0 10px;
      font-size: 16px;
      line-height: 18px;
      height: 35px;
      display: inline-block;
      margin: 0 auto;
    }
    footer input[type=submit] {
      border: 1px solid #df242b;
      background: #df242b url('../../../gfx/submit.jpg') no-repeat center center;
      color: #fff;
      width: 38px;
      height: 37px;
      font-size: 18px;
      line-height: 18px;
      cursor: pointer;
      display: inline-block;
      margin: 0 auto;
    }

<footer>
  <input type="text" />
  <input type="submit" />
</footer>

Answer 3

这样使用

<style>
body{margin:0;}
footer{
 width:100%;
 background:#ccc;
 height:250px;
}
.form{
 width:292px;
 margin:0 auto;
}
footer input[type=text] {
  border-top: 1px solid #efefef;
  border-left: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  border-right: 0;
  width: 230px;
  padding: 0 10px;
  font-size: 16px;
  line-height: 18px;
  height: 37px;
  display: inline-block;
  float: left;
  margin: 0 auto;
}
footer input[type=submit] {
  border: 1px solid #df242b;
  background: #df242b;
  color: #fff;
  width: 38px;
  height: 37px;
  font-size: 18px;
  line-height: 18px;
  cursor: pointer;
  display: inline-block;
  float: left;
  margin: 0 auto;
}
</style>

<footer>
  <div class="form">
   <input type="text">
   <input type="submit" value=">">
  </div>
</footer>

一行输入文字提交

Input text and submit in one line

html

css

input