Question

我有一个输入字段和一个提交按钮。

当我向右浮动提交按钮时，我希望它在输入字段的同一点结束 - 这是我的意思的一个例子：http://prntscr.com/aggln5

目前，输入和提交在不同点结束：https://jsfiddle.net/9mjrz05o/

<div id="container">
  <form>
    <input type="text">
    <br />
    <input type="submit" style="float: right;">
  </form>
</div>

CSS：

#container {
  background: blue;
  padding: 20px;
  width: 50%;
}

input {
  display: block;
}

Answer 1

将输入宽度设置为100％

input[type="text"]{
  width: 100%;
}

https://jsfiddle.net/9mjrz05o/1/

Answer 2

使用此..
你需要清除浮动，所以我添加了form:after{ ... }

#container {
  background: blue;
  padding: 20px;
  width: 50%;
}

    input[type="text"]{
      display: block;
      width:100%;
    }
    form{
        width:100%;
        position:relative;
    }

    form:after
    {
      content:'.';
      position:relative;
      clear:both;
      visibility:hidden;
      height:0px;
    }

    input[type="submit"]
     {
        width:70px;
     }

Answer 3

更新：

设置input {display: inline-block; }和#container { text-align: right; }

见这里：https://jsfiddle.net/s6h7of5p/

Answer 4

从提交按钮中删除float属性，并将此行添加到CSS的输入部分：

margin-left:auto;

Answer 5

试试这个

https://jsfiddle.net/9mjrz05o/2/

我添加了以下CSS

#container {
    background: blue;
    padding: 20px;
    width: 50%;
}

input {
    display: block;
    float: left;
}

form {
    height: 100px
}

Answer 6

您可以display: inline-flex上的form执行此操作。因此，如果您更改文本输入submit的宽度，则输入将始终与文本输入的右侧对齐，如您在此处所见Fiddle

#container {
  background: blue;
  padding: 20px;
  width: 50%;
}

form {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

<div id="container">
  <form>
    <input type="text">
    <input type="submit">
  </form>
</div>

或者您也可以display: inline-block上的form和提交 float: right

上的input执行此操作

#container {
  background: blue;
  padding: 20px;
  width: 50%;
}

form {
  display: inline-block;
  border: 1px solid white;
}

input {
  display: block;
}

input[type="submit"] {
  float: right;
}

<div id="container">
  <form>
    <input type="text">
    <input type="submit">
  </form>
</div>

Answer 7

从HTML中删除br并提供内联块显示以形成并阻止显示输入。

#container {
    background: blue;
    padding: 20px;
    width: 50%;
    }
    form{
      display:inline-block
    }

    input {
      display: block;
    }

浮动提交权利

7 个答案: