如何修复此css左对齐？

Question

我将每个选项都放入一个容器中，所以我有8个容器，从左到右，从上到下。

但由于某些未知原因，item_container 3和4没有跟随对齐！我花了好几个小时但没有好处。现在非常令人沮丧。

这是我的HTML代码。 item_container 5~8与1,2基本相同，并且它们完全对齐，所以我没有包含它们。

＆＃13;

＆＃13;

.page_item {
	display: inline-block;
	margin-left: 28px;
	margin-right: 8px;
	margin-bottom: 1px;
}

.page_field {
	display: inline-block;
	margin-right: 68px;
	margin-bottom: 1px;
}

.page_check_field {
	display: inline-block;
	margin-right: 8px;
	margin-bottom: 1px;
}

.page_container {
	display: block;
	width: 876px;
	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 {
	display: inline-block;
}

.item_container1, .item_container2, .item_container3 .item_container4, .item_container5, .item_container6, .item_container7, .item_container8 {
	display: inline-block;
	width: 436px;
}

＆＃13;

<div class="page_container">
			<div class="item_container1">
				<h6 class="page_item">User ID</h6>
				<div class="page_field form-group form-group-label">
					<label class="page_entry floating-label" for="..."> Entry User ID </label>
					<input class="form-control" id="..." type="text">
				</div>
			</div>
			<div class="item_container2">	
				<h6 class="page_item">Country</h6>
				<div class="page_field form-group form-group-label">
					<select class="page_entry form-control" id="...">
						<option value="..."> Select </option>
						<option value="..."> Country 1 </option>
						<option value="..."> Country 2 </option>
						<option value="..."> Country 3 </option>
						<option value="..."> Country 4 </option>
						<option value="..."> Country 5 </option>
						<option value="..."> Country that has very long name </option>
					</select>
				</div>
			</div>
		</div>
		
		<div class="page_container">
			<div class="item_container3">
				<h6 class="page_item">Email</h6>
				<div class="page_field form-group form-group-label">
					<label class="floating-label" for="..."> Entry User Email </label>
					<input class="form-control" id="..." type="text">
				</div>
			</div>
			<div class="item_container4">
				<h6 class="page_item">User Type</h6>
				<div class="page_check_field">
					<div class="checkbox checkbox-adv">
						<label for="check1">
						<input class="access-hide" id="check1" name="check1" type="checkbox">Cosplayer
						<span class="checkbox-circle"></span>
						<span class="checkbox-circle-check"></span>
						<span class="checkbox-circle-icon icon">done</span>
						</label>
					</div>
				</div>
				<div class="page_check_field">
					<div class="checkbox checkbox-adv">
						<label for="check2">
						<input class="access-hide" id="check2" name="check2" type="checkbox">Cameraman
						<span class="checkbox-circle"></span>
						<span class="checkbox-circle-check"></span>
						<span class="checkbox-circle-icon icon">done</span>
						</label>
					</div>
				</div>
				<div class="page_check_field">
					<div class="checkbox checkbox-adv">
						<label for="check3">
						<input class="access-hide" id="check3" name="check3" type="checkbox">Organizer
						<span class="checkbox-circle"></span>
						<span class="checkbox-circle-check"></span>
						<span class="checkbox-circle-icon icon">done</span>
						</label>
					</div>
				</div>
			</div>
		</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

此行中缺少逗号可能会导致您的麻烦

.item_container2, .item_container3 .item_container4,

Answer 2

此问题的原因是.page-container的宽度不够宽。 .item_container4在.page-container宽度上太大了。 要解决此问题，您只需要更改.page-container的更改宽度。 可以设置宽度： .page-container {     宽度：920px;     ......... } 它工作正常！ 希望有所帮助

Answer 3

.item_container1, .item_container2, .item_container3, .item_container4, .item_container5, .item_container6, .item_container7, .item_container8 {
    display: inline-block;
    width: 436px;
}

, between item_container3 and item_container4 is missing and i thought you might be adjust your width for better look