我有一个表格，看起来像这样：如何让两个物体水平对齐（一个位于另一个的右侧）并居中左侧？
<div class="container">
<form action="/my-handling-form-page" method="post">
<div class="form-group">
<input type="text" name="query"/>
<button type="submit">Search</button>
</div>
</form>
</div>
，我想输入在页面中水平居中，然后我想按钮将它水平对齐和放置的权输入元素。我该怎么做呢？
我试图让它们都显示：内联块和居中输入，但我不能让它工作。
此外，我使用引导，如果有帮助/不。 Here是整件事的小提琴
您可以使用表格布局上.form-group通过margin缩小它的内容和居中：
body {
margin: 10px;
}
.form-group{
display:table;
margin: 0 auto;
}
input, button{
float: left;
}
/* optionnal to take button off from center calculation */
/* demo purpose */
html:hover button {
position:absolute;
}
body {
min-height:100%;
background:linear-gradient(to left, transparent 50%, lightgray 50%);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form action="/my-handling-form-page" method="post">
<div class="form-group">
<input type="text" name="query" class="searchbar same-line centered"/>
<button type="submit" class="same-line">Search</button>
</div>
</form>
</div>保持按钮偏离中心，您可使用填充和绝对：
body {
margin: 10px;
}
.form-group{
display:table;
margin: 0 auto;
padding:0 5em;/* to keep button in sight if window comes very small */
}
input, button{
float: left;
}
button {
position:absolute;
}
body {
min-height:100%;
background:linear-gradient(to left, transparent 50%, lightgray 50%);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form action="/my-handling-form-page" method="post">
<div class="form-group">
<input type="text" name="query" class="searchbar same-line centered"/>
<button type="submit" class="same-line">Search</button>
</div>
</form>
</div>非常感谢您的详细解答！ – user3494047
请尝试漂浮：左;输入并提交按钮并为您的表单添加宽度。将它们水平居中仅为边距：0自动到您的表单。
这样的：
<div class="container">
<form action="/my-handling-form-page" method="post">
<div class="form-group">
<input type="text" name="query"/>
<button type="submit">Search</button>
</div>
</form>
</div>
CSS：
.container{
width: 800px;
background: #000;
}
form{
width: 200px;
background: #fff;
margin: 0 auto;
}
input, button{
width: 50px;
float: left;
}
谢谢。我怎样才能使它以不同的宽度工作？使用百分比？你的解决方案适用于你发布的宽度，我在这里尝试了https：// jsfiddle。net/k6bot5mu/1 /，但使用不同的宽度/不指定宽度，它总是向左溢出。对不起，如果这是显而易见的，但我是新来的css/html – user3494047
是的，你总是可以使用百分比。但请注意，输入和按钮的宽度应适合表单的宽度。并为了保证金0自动工作和中心的元素，它应该有一个宽度也有父div。 –
从你的问题我得知你只是想与该按钮坐在右边为中心的输入。其他答案只是将两个元素集中在一起本示例使用引导列将输入居中并将按钮放置在右侧。随着窗口变小，它对窗口大小作出响应并在宽度上扩展。
<div class="container">
<form action="/my-handling-form-page" method="post" class="row">
<div class="form-group">
<div class="col-xs-10 col-xs-offset-0 col-md-4 col-md-offset-4">
<input type="text" name="query" class="form-control"/>
</div>
<div class="col-xs-2 col-md-4">
<button type="submit" class="btn btn-default">Search</button>
</div>
</div>
</form>
</div>
我删除了你的代码，增加了这些小的变化，只修改了你的CSS，使用按钮的margin-top。
button {
height: 25px;
margin-top: 1px;
}
form * {
margin: 10px, 10px, 10px;
}
input {
float: left;
margin-top: 2px;
}
给出输入和按钮'float：left'你也可以尝试给它们两个一定的宽度。对象应该以form-group元素为中心 - 试着用'margin：auto'做到这一点 – Roysh
谢谢！我添加了一个html/css的小提琴并尝试了你的建议，但是没有指定它向左侧溢出的宽度。 – user3494047
它是否适用于宽度？ 如果你正在使用boostrap，你可以通过colmd-12来形成组合类，然后使用col-md-6来输入和按钮类 – Roysh