Чтобы отобразить элементы рядом друг с другом, используйте display:inline-block
(или вы можете использовать flex с flex-direction of row, если вы использовали flex-box, но это на другой день). Вы используете Bootstrap CSS, но вы можете добавить свои собственные CSS. Именно потому, что css предопределен в начальной загрузке, мне пришлось добавить !important
перед атрибутом inline-block.
Я добавил класс "label-control" на ваш ярлык. Вы можете добавить класс form-control
и размер их обоих одинаков, но тогда вы можете убрать границу с метки, добавив label.form-control{border:none;}
, если вы сделаете это. Создав новый класс, вы можете по-разному определять размеры элементов.
Надеюсь, это поможет
.label-control {
border: none;
padding: 10px;
max-width: 30%;
}
.form-control {
display: inline-block!important;
vertical-align: middle;
max-width: 60%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label for="zipID" class="label-control">Zip Code:</label>
<select name="zipID" id="zipID" class="form-control input-sm" required message="Please select a zip code.">
<option value="">Please Select</option>
<option value="34201" class="notranslate">34201</option>
<option value="34202" class="notranslate">34202</option>
<option value="34203" class="notranslate">34203</option>
<option value="34204" class="notranslate">34204</option>
<option value="34205" class="notranslate">34205</option>
<option value="34207" class="notranslate">34207</option>
<option value="34208" class="notranslate">34208</option>
<option value="34209" class="notranslate">34209</option>
<option value="34210" class="notranslate">34210</option>
<option value="34211" class="notranslate">34211</option>
<option value="34212" class="notranslate">34212</option>
<option value="34281" class="notranslate">34281</option>
<option value="34215" class="notranslate">34215</option>
<option value="34216" class="notranslate">34216</option>
<option value="34217" class="notranslate">34217</option>
<option value="34219" class="notranslate">34219</option>
<option value="34221" class="notranslate">34221</option>
<option value="34222" class="notranslate">34222</option>
<option value="34228" class="notranslate">34228</option>
<option value="34243" class="notranslate">34243</option>
<option value="34251" class="notranslate">34251</option>
</select>
</div>
</div>
</div>