以下のjsbinに2つのドロップダウンリストがあります。どのようにしてそれらを整列させ、ページの中央に向かって整列させることができますか？ html要素を順に整列する
また、私のブートストラップジャムトロンヘッダーは、ページ全体。 私は以下を使ってそれをしようとしましたが、それでもまだ左にスペースが残っています。
<div class="jumbotron" style="width: 1600px;">
編集：下記のコード変更を試しました。 jumbotronを全幅にすることができましたが、ドロップダウンリストはjsbinsで見るものとはかなり異なっています。以下のスクリーンショットをご覧ください。
次JSBinを見てみましょう：http://jsbin.com/tapuviyoja/1/edit?html,css,output
は、私はあなたが1後に整列によって何を意味するかわかりません別のインラインまたは次の行を意味しますか？インラインにしたい場合は、2つの選択要素とdisplay: inline-block;の間の<br>を削除する必要があります。
あなたのジャンボトロンは、その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;
}
この方法で動作します<form>を変更する：
<form method="get" action="index.php" style="text-align: center;">
またはCSSでの、追加：
form {text-align: center;}
まず、そして、ラッパー内div.
をformをラップ、を設定しますform〜inline-blockのプロパティは、.wrapper要素の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;
}
以下は、問題を分類する必要があります。あなたの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>
@A。シャルマ、ありがとう。私はまだアライメントに問題があります。上記の編集を参照してください – PepperBoy
フォームの幅を** ** 100％**にしてください。 'form'については私の上記のCSSコードを見てください。実際に私が提示したJSBinからコードをコピーすることができます。ありがとう。 –
あなたのコードに従っていましたが、誤ってエコー「」を配置しました。 2つのドロップダウンリストの間に配置されているため、編集中の画像と同じ位置に表示されていました。私はあなたのCSSコードを使用していただけで、HTMLコードをそのまま保管していました。それを変更し、正常に動作します。 – PepperBoy