0
私はすべてのオプションをコンテナに入れました。したがって、左から右に8つのコンテナが上から下にあります。このCSSの左揃えを修正するにはどうすればよいですか？
しかし、何らかの不明な理由により、item_container 3と4がアラインメントに従っていません。私はこれに数時間を費やしましたが、良いことはありません。だから今はイライラしている。
は、ここに私のhtmlコードです。 item_container 5〜8は基本的に1,2と同じで、完全に整列していますので、私は含めませんでした。
.page_item {
\t display: inline-block;
\t margin-left: 28px;
\t margin-right: 8px;
\t margin-bottom: 1px;
}
.page_field {
\t display: inline-block;
\t margin-right: 68px;
\t margin-bottom: 1px;
}
.page_check_field {
\t display: inline-block;
\t margin-right: 8px;
\t margin-bottom: 1px;
}
.page_container {
\t display: block;
\t width: 876px;
\t height: 74px;
}
.page_container .item_container1, .page_container .item_container2, .page_container .item_container3, .page_container .item_container4, .page_container .item_container5, .page_container .item_container6, .page_container .item_container7, .page_container .item_container8 {
\t display: inline-block;
}
.item_container1, .item_container2, .item_container3 .item_container4, .item_container5, .item_container6, .item_container7, .item_container8 {
\t display: inline-block;
\t width: 436px;
}<div class="page_container">
\t \t \t <div class="item_container1">
\t \t \t \t <h6 class="page_item">User ID</h6>
\t \t \t \t <div class="page_field form-group form-group-label">
\t \t \t \t \t <label class="page_entry floating-label" for="..."> Entry User ID </label>
\t \t \t \t \t <input class="form-control" id="..." type="text">
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="item_container2"> \t
\t \t \t \t <h6 class="page_item">Country</h6>
\t \t \t \t <div class="page_field form-group form-group-label">
\t \t \t \t \t <select class="page_entry form-control" id="...">
\t \t \t \t \t \t <option value="..."> Select </option>
\t \t \t \t \t \t <option value="..."> Country 1 </option>
\t \t \t \t \t \t <option value="..."> Country 2 </option>
\t \t \t \t \t \t <option value="..."> Country 3 </option>
\t \t \t \t \t \t <option value="..."> Country 4 </option>
\t \t \t \t \t \t <option value="..."> Country 5 </option>
\t \t \t \t \t \t <option value="..."> Country that has very long name </option>
\t \t \t \t \t </select>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t
\t \t <div class="page_container">
\t \t \t <div class="item_container3">
\t \t \t \t <h6 class="page_item">Email</h6>
\t \t \t \t <div class="page_field form-group form-group-label">
\t \t \t \t \t <label class="floating-label" for="..."> Entry User Email </label>
\t \t \t \t \t <input class="form-control" id="..." type="text">
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="item_container4">
\t \t \t \t <h6 class="page_item">User Type</h6>
\t \t \t \t <div class="page_check_field">
\t \t \t \t \t <div class="checkbox checkbox-adv">
\t \t \t \t \t \t <label for="check1">
\t \t \t \t \t \t <input class="access-hide" id="check1" name="check1" type="checkbox">Cosplayer
\t \t \t \t \t \t <span class="checkbox-circle"></span>
\t \t \t \t \t \t <span class="checkbox-circle-check"></span>
\t \t \t \t \t \t <span class="checkbox-circle-icon icon">done</span>
\t \t \t \t \t \t </label>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="page_check_field">
\t \t \t \t \t <div class="checkbox checkbox-adv">
\t \t \t \t \t \t <label for="check2">
\t \t \t \t \t \t <input class="access-hide" id="check2" name="check2" type="checkbox">Cameraman
\t \t \t \t \t \t <span class="checkbox-circle"></span>
\t \t \t \t \t \t <span class="checkbox-circle-check"></span>
\t \t \t \t \t \t <span class="checkbox-circle-icon icon">done</span>
\t \t \t \t \t \t </label>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="page_check_field">
\t \t \t \t \t <div class="checkbox checkbox-adv">
\t \t \t \t \t \t <label for="check3">
\t \t \t \t \t \t <input class="access-hide" id="check3" name="check3" type="checkbox">Organizer
\t \t \t \t \t \t <span class="checkbox-circle"></span>
\t \t \t \t \t \t <span class="checkbox-circle-check"></span>
\t \t \t \t \t \t <span class="checkbox-circle-icon icon">done</span>
\t \t \t \t \t \t </label>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
を助けるホープ...実際に –
これはあなたの問題の原因です。あなたの不条理な長いセレクタに '...、.item_container3 .item_container4、...'、そこに '、'が足りず、問題の原因となっています。それらをすべて 'class =" item_container "'にするだけで、数字は省きます。 –
ありがとうございました！ –