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>

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

我尝试过将它们都显示出来：内联块并将输入居中，但我无法让它工作。

我也在使用bootstrap，如果这有帮助/没有。 Here是整件事的小提琴

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>

要保持按钮偏离中心，您可以使用填充和绝对：

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>

Answer 2

请尝试漂浮：左;输入和提交按钮，并为您的表单添加宽度。将它们水平居中只是边距：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;
}

Answer 3

从你的问题我收集到你只希望输入以按钮位于右侧为中心。其他答案只是将两个元素集中在一起此示例使用引导列将输入居中，并将按钮置于右侧。它响应窗口大小，并随着窗口变小而扩展宽度。

<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

Answer 4

我删除了您的代码并添加了这些小修改，只使用按钮的... interval => 2, cb => sub { sleep 1; # Simulated blocking operation. Sleep less than the interval!! say "timer"; ... timer child timer timer修改了您的CSS。

margin-top

如何将两个对象水平对齐（一个对齐另一个）并使左对齐？

4 个答案: