[英]How can I have two objects aligned horizontally (one to the right of the other) and center the left one?
I have a form which looks like this: 我有一个看起来像这样的表格:
<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>
and I want the input to be horizontally centered in the page and then I would like the button to be aligned with it horizontally and placed to the right of the input element. 我希望输入在页面中水平居中,然后希望按钮与它水平对齐并放置在输入元素的右侧。 How do I do this? 我该怎么做呢?
I have tried making them both display: inline-block and centering the input but I can't get it to work. 我试图使它们都显示:内联块和居中输入,但我无法使其正常工作。
Also I am using bootstrap if that helps/doesn't. 如果有帮助/无用,我也正在使用引导程序。 Here is a fiddle of the whole thing 这是整件事
You could use the table layout on .form-group
to shrink it on its content and center it via margin
: 您可以在.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>
to keep button off center, you may use padding and absolute : 要使按钮偏离中心,可以使用padding和absolute:
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>
Please try to float: left; 请尝试浮动:左; both input and submit button and add a width to your form. 输入和提交按钮,并在表单中添加宽度。 to center them horizontally just margin: 0 auto to your form. 将其水平居中放置边缘:0自动生成表单。
like this: 像这样:
<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: CSS:
.container{
width: 800px;
background: #000;
}
form{
width: 200px;
background: #fff;
margin: 0 auto;
}
input, button{
width: 50px;
float: left;
}
From your question I gathered that you only wanted the input centered with the button sitting to the right. 从您的问题中我得出结论,您只希望输入与位于右侧的按钮居中。 The other answers simply center both elements. 其他答案只是将两个元素居中。 This example uses bootstrap columns to center the input and place the button to the right. 本示例使用引导程序列将输入居中并将按钮放置在右侧。 It is responsive to the window size and expands in width as the window gets smaller. 它对窗口大小有响应,并且随着窗口变小而在宽度上扩展。
<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>
http://codepen.io/rawiki/pen/PzNZwz http://codepen.io/rawiki/pen/PzNZwz
I removed your code and added these small changes, only modified your CSS, using margin-top
of the button. 我删除了代码并添加了这些小的更改,仅使用按钮margin-top
修改了CSS。
button {
height: 25px;
margin-top: 1px;
}
form * {
margin: 10px, 10px, 10px;
}
input {
float: left;
margin-top: 2px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.