Question

我在下面的jsbin中有两个下拉列表。如何将它们一个接一个地对齐，并将它们对齐到页面的中心，两个html元素之间有足够的空间，没有硬编码空格，使用

另外，我的bootstrap jumbotron标题不会跨越整个页面。我尝试使用以下方法来做到这一点，但是，它仍然在左边留下了一个空格。

<div class="jumbotron" style="width: 1600px;">

编辑：我已经尝试过以下建议的代码更改。我现在可以将jumbotron变为全宽，但是，下拉列表与我在jsbins中看到的完全不同。请看下面的截图。

Answer 1

以这种方式更改<form>：

<form method="get" action="index.php" style="text-align: center;">

或者在CSS中添加：

form {text-align: center;}

Answer 2

首先，将form包装在包装器div.

中

然后，将display上的form属性设置为inline-block，这会使其对父text-align: center元素上的.wrapper属性做出反应。最后，将text-align上的form属性设置为left，以便子inline和inline-block元素不会居中。

HTML

  <div class="wrapper">
    <form method="get" action="index.php">
      ...
    </form>
  </div>

CSS

.wrapper {
  text-align: center;
}

form {
  display: inline-block;
  text-align: left;
}

DEMO http://jsbin.com/medanexipo/1/edit?html,css,output

Answer 3

看看以下JSBin：http://jsbin.com/tapuviyoja/1/edit?html,css,output

我不确定你的意思是彼此对齐。你的意思是内联还是下一行？如果您想要内联，则需要删除两个选择元素和<br>之间的display: inline-block;。

你的Jumbotron没有扩展整个宽度，因为它的container也有一些填充。取下衬垫并将容器和超大尺寸的宽度设置为100％;

为了使表单对齐居中，您需要将其宽度增加到窗口的100％，然后再text-align:center。

.line{
width:33%;
float:left;
}

.jumbotron {
 padding-top: 0%;
 padding-bottom: 0%;
 width:100%;
}

.container{
  width:100%;
  padding:0;
}

body {
  background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRZQXod-TpW5bx9oSysCVEdpsYS_9ssKwfbS04asZ2L9xzSnOiHdhFWxFS9') no-repeat center center;
  /*opacity: 0.2;*/
  background-size: cover;
}

form{
  text-align:center;
  width:100%;
}

form select{
 display:inline-block;
}

Answer 4

以下内容应该解决您的问题。您的HTML结构也存在问题。例如，你头脑中有div和其他一些问题。

body {
  background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRZQXod-TpW5bx9oSysCVEdpsYS_9ssKwfbS04asZ2L9xzSnOiHdhFWxFS9') no-repeat center center;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.container {
  padding: 0
}
.jumbotron {
  padding: 0;
  margin: 0;
}
form {
  text-align: center
}
select {
  margin-right: 10px
}

<html>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</html>

<body>
  <div class="container">
    <div class="jumbotron">
      <h1 align="center" style="font-family:Comic Sans MS">Check Near You</></h1>
      <p align="center" style="font-family:Comic Sans MS">See which articles are near you ...</p>
    </div>
  </div>
  <form method="get" action="index.php">
    <select class="language" name="language">
      <option value="tagalog">Tagalog</option>
      <option value="english">English</option>
    </select>


    <select class="year" name="year">
      <option value="2010">2010</option>
      <option value="2011">2011</option>
      <option value="2012">2012</option>
      <option value="2013">2013</option>
      <option value="2014">2014</option>
      <option value="2015">2015</option>
      <option value="2016">2016</option>
      <option value="2017">2017</option>
      <option value="2018">2018</option>
      <option value="2019">2019</option>
      <option value="2020">2020</option>
    </select>

    <input type="submit" value="submit">
  </form>
</body>

</html>

一个接一个地对齐html元素

4 个答案: