html - 如何让两个对象水平对齐(一个在另一个的右侧)并使左侧居中？

Question

我有一个看起来像这样的表格:

<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>

我希望输入在页面中水平居中，然后我希望按钮与其水平对齐并放置在输入元素的右侧。我该怎么做？

我试过让它们都显示:内联 block 并使输入居中，但我无法让它工作。

如果有帮助/没有帮助，我也会使用 bootstrap。 Here是整个事情的 fiddle

Answer 1

您可以使用 .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>

为了让按钮偏离中心，你可以使用 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>