一個接一個對齊html元素

我在下面的jsbin中有兩個下拉列表。我怎樣才能一個接一個地對齊它們，並將它們對齊頁面中心，兩個html元素之間有足夠的空間，而不用硬編碼空格，使用一個接一個對齊html元素

另外，我的引導程序jumbotron標題不會跨越整個頁面。我試圖用下面的方法來做，但是，它仍然在左邊留下一個空格。

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

編輯：我試過了下面提示的代碼更改。我現在可以讓jumbotron成爲全長，但是，下拉列表與我在jsbins中看到的完全不同。請看下面的截圖。

來源

2016-04-29 PepperBoy

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

我不知道你一後的意思是對齊什麼另一個。你是指內聯還是下一行？如果你想內聯，那麼你需要刪除兩個select元素之間的<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; 
}

來源

2016-04-29 14:46:09

@A。夏爾馬，謝謝。我仍然有對齊問題。請參閱上面的編輯 – PepperBoy

使表格寬度** 100％**。看到我的CSS代碼上面的'表格'。你真的可以從我提交的JSBin中複製代碼。 –

謝謝。我正在關注你的代碼，但我不小心放置了一個回聲「
」;在兩個下拉列表之間，導致定位與編輯中的圖像一樣。我只使用你的CSS代碼，並保持我的HTML代碼。改變它，並且工作正常。 – PepperBoy

更改<form>這樣工作的：

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

或者在CSS中，添加：

form {text-align: center;}

來源

2016-04-29 14:38:50

首先，包裹form的包裝內div.

然後，設置display屬性form到inline-block，這使其對元素上的text-align: center屬性做出反應。最後，將form上的text-align屬性設置爲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

來源

2016-04-29 14:45:09 Ozrix

下面應該解決你的問題。你的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>

來源

2016-04-29 14:49:37 JustinChev

@JustinChew，謝謝。從我的jsbin中，對齊方式看起來有點不同。請看上面的編輯 – PepperBoy

@JustinChew，謝謝Justin。你的解決方案工作正常，我不小心在html中的兩個下拉列表之間放置了一個echo「
」l – PepperBoy

一個接一個對齊html元素

回答

相關問題