Question

我的标题中的按钮正在做这个非常烦人的事情，在输入表单下面。我在线搜索过＆amp; amp;看到人们对类似问题给出的不同答案，但没有一个对我有用。下面是问题的图像。任何人都可以弄清楚我错过了什么吗？

.search-form {
  display: inline-block;
  float: right;
}
button.btn.btn-secondary {
  display: inline-block;
}
#product-search-btn {
  padding 0;
  display: inline-block;
}

<form role="search" method="get" class="search-form">
  <input type='textbox' name="s" class="form-control form-inline" id="item-search" placeholder="Enter your postcode.." />
  <input class="btn btn-secondary no-border " id="product-search-btn" type="submit" class="search-submit" />
</form>

Answer 1

看我的小提琴

<form role="search" method="get" class="search-form" action="">
  <input class="btn btn-secondary no-border " id="product-search-btn" type="submit" class="search-submit" />
  <input type='textbox' name="s" class="form-control form-inline" id="item-search" value="" placeholder="Enter your postcode.." />
</form>

和css

.search-form {
  display: inline-block;
  float: right;
}

#item-search {
  width: 70%;
}

button.btn.btn-secondary {
  display: inline-block;
}

#product-search-btn {
  padding 0;
  display: inline-block;
  float: right;
}

Microsoft Azure documentation

您需要设置文本输入的宽度，让按钮浮动在它旁边

您也可以使用bootstrap网格系统，请参阅以下文档：）

----------编辑---------------

好的，正如评论中所述，有很多不一致的内容。

我更新了小提琴，试图让事情更清楚。

我仍然没有使用引导网格系统，以避免混淆。

这个问题只是宽度问题

https://jsfiddle.net/hyk18g88/

让我知道你的想法

Answer 2

.search-form {
    display: flex;
    float: right;
}

尝试使用上述属性替换搜索表单类。

Answer 3

你应该尝试使用列css的东西：

在css文件中添加：

    * {box-sizing: border-box;}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}



[class*="col-"] {
    float: left;
    padding: 5px;
}

然后在你的html中添加＆＃34; col- [size]＆＃34;标签的类属性。容器标签应该在其类＃＆col; 12＆＃34;指定它占据整个宽度。容器内的标签应带有＃34; col-8＆＃34;和＆＃34; col-4＆＃34;例如：

    <!DOCTYPE html>
<html>
<head>
    <meta charset=\'utf-8\'/>
    <title>test</title> 

    <link rel='stylesheet' href='index.css'/>
</head>
<body>
    <h1>test</h1>
    <form role="search" method="get" class="search-form col-12">
  <input type='textbox' name="s" class="form-control form-inline col-8" id="item-search" placeholder="Enter your postcode.." />
  <input class="btn btn-secondary no-border col-4" id="product-search-btn" type="submit" class="search-submit" />
</form>
</body>

如何让我的按钮内联（旁边）输入？

3 个答案: