Css, html5 правильное отображение элементов

211

21 апреля 2017, 19:40

Добрый день, пытаюсь добиться следующей картины:

Написал следующий код:

<div class="container calc_desc">
                <div class="col-md-5">
                    <ul class = "calc_desc-ul_desc col-md-6 col-sm-6 col-xs-6">
                        <li>Расстояние: </li>
                        <li>Заблокированный руль: </li>
                        <li>Заблокированные колеса: </li>
                    </ul>
                </div>
                <div class="col-md-7">
                    <ul class = "col-md-6 col-sm-6 col-xs-6">
                        <li>
                            <input type="radio" name="calc_where_from" class="calc_where_from" id ="city" checked><label for="city">по городу</label>&emsp;          
                            <input type="radio" name="calc_where_from" class="calc_where_from" id ="country"><label for="country">за городом</label>&emsp;
                            <input type="number" id="calc-country_km" value = "0" oninput="count_km()"><label> km.</label>
                        </li>
                        <li><input type="checkbox" id="calc-helm_blocked"></li>
                        <li>
                            <input type="radio" name="calc-wheel_blocked" id="calc-wheel_blocked_0" data-wheel="0" checked><label for="calc-wheel_blocked_0">Нет</label>&emsp;
                            <input type="radio" name="calc-wheel_blocked" id="calc-wheel_blocked_1" data-wheel="1"><label for="calc-wheel_blocked_1">1</label>&ensp;
                            <input type="radio" name="calc-wheel_blocked" id="calc-wheel_blocked_2" data-wheel="2"><label for="calc-wheel_blocked_2">2</label>&ensp;
                            <input type="radio" name="calc-wheel_blocked" id="calc-wheel_blocked_3" data-wheel="3"><label for="calc-wheel_blocked_3">3</label>&ensp;
                            <input type="radio" name="calc-wheel_blocked" id="calc-wheel_blocked_4" data-wheel="4"><label for="calc-wheel_blocked_4">4</label>&ensp;
                        </li>
                    </ul>
                </div>
            </div>

А получается следующая картина:

Элементы съезжают и получается все коряво. Может есть идеи как правильно делать, может не через 2 ul элемента. И как можно добиться адаптивности, чтобы на мобильниках не было каши

Спасибо.

П.с. мне почему -то кажется, что через 2 ul неправильно делать, а как сделать иначе идеи не приходят

Answer 1

Ты использовал бутстрап?

Попробуй добавить такие стили (ширину и параметры сам выставляй нужные, меняй ширину в зависимости от размера экрана, а при планшетах и телефонов нужно уже смотреть на дизайн):

.container.calc_desc {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
}
.col-md-5 {
  display: flex;
  flex-direction: column;
  width: 300px;
}
.col-md-7 {
  display: flex;
  flex-direction: column;
  width: 100%;
}