Блог

Главная - Вопросы по программированию - Как сохранить четыре кнопки в одной строке при изменении размера?

Как сохранить четыре кнопки в одной строке при изменении размера?

#html #css

#HTML #css

Вопрос:

Я пытаюсь реализовать простую браузерную игру для изучения веб-разработки. У меня есть группа divs, с помощью которой я хочу представить воина. Здесь у меня есть группа кнопок с 4 кнопками во главе «таблицы div». Проблема в том, что 4 кнопки не отображаются в одной строке, когда экран становится меньше. Другая проблема заключается в том, что между кнопками есть пробелы, но я хочу, чтобы они динамически заполняли всю группу кнопок. Итак, если есть две кнопки, они также должны заполнить группу кнопок. Кто-нибудь может помочь?

Вот мой jsfiddle: 

 .div-TableHeadName {
  padding-top:6px;
  height:35px;
  background-color: darkgrey;
}
.div-TableHeadClass {
  padding-top:6px;
  background-color: darkgrey;
  height:35px;
}
.div-TableBodyImage{
  height:160px;
  background-color: lightgrey;
}
.div-TableBodyDescription{
    height: 160px;
    background-color: lightgrey;
}
.btn--actionType{
  background-color: lightgrey;
  border-radius: 0 !important;
  height: 35px;
  width: 25%
}

.btn--actionType:hover{
  background-color: red;
}
.btn--performAction{
  background-color: black;
  border-radius: 0 !important;
  color: white;
  height: 35px;
  width: 25%
}
.btn--group{
  cursor:pointer;
}  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class="div-Table">
    <div class="col-md-2 col-sm-2 col-xs-2 div-TableHeadName">
      <span>Guldan</span>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4 div-TableHeadClass">
      <span>Warrior</span>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
      <btn-group data-toggle="buttons" class="btn--group">
        <div class="btn btn--actionType">
          <label>
            <input type="radio" name="action" value="sword"/>Sword
          </label>
        </div>
        <div class="btn btn--actionType">
          <label>
            <input type="radio" name="action" value="axe"/>Axe
          </label>
        </div>
        <div class="btn btn--actionType">
          <label>
            <input type="radio" name="action" value="bow"/>Bow
          </label>
        </div>
        <div type="button" class="btn btn--performAction">Attack
        </div>
      </btn-group>
    </div>
  </div>
  <div style="padding-top:10px" class="col-md-2 col-sm-2 col-xs-2 div-TableBodyImage">  
    <img src="https://upload.wikimedia.org/wikipedia/en/b/b1/Portrait_placeholder.png" width="100"/>
  </div>
  <div style="padding: 10px" class="col-md-10 col-sm-10 col-xs-10 div-TableBodyDescription">
    <span>This is a description for Guldan, an orc warrior.</span>
  </div>
</body>

Комментарии:

1. Кажется необычным, что переключатели выглядят как обычные кнопки. Я бы не считал это хорошим UX. Просто мое мнение.

Ответ №1:

 .div-TableHeadName {
  padding-top:6px;
  height:35px;
  background-color: darkgrey;
}
.div-TableHeadClass {
  padding-top:6px;
  background-color: darkgrey;
  height:35px;
}
.div-TableBodyImage{
  height:160px;
  background-color: lightgrey;
}
.div-TableBodyDescription{
    height: 160px;
    background-color: lightgrey;
}
.btn--actionType{
  background-color: lightgrey;
  border-radius: 0 !important;
  height: 35px;
  width: 25%;
  float: left;
}

.btn--actionType:hover{
  background-color: red;
}
.btn--performAction{
  background-color: black;
  border-radius: 0 !important;
  color: white;
  height: 35px;
  width: 25%
}
.btn--group{
  cursor:pointer;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class="div-Table">
    <div class="col-md-6 col-sm-6 col-xs-6">
      <btn-group data-toggle="buttons" class="btn--group">
        <div class="btn btn--actionType">
          <label>
            <input type="radio" name="action" value="sword"/>Sword
          </label>
        </div>
        <div class="btn btn--actionType">
          <label>
            <input type="radio" name="action" value="axe"/>Axe
          </label>
        </div>
        <div class="btn btn--actionType">
          <label>
            <input type="radio" name="action" value="bow"/>Bow
          </label>
        </div>
        <div type="button" class="btn btn--performAction">Attack
        </div>
      </btn-group>
    </div>  
  </div>    
</body>

Иногда сокращение вашей проблемы только до важных элементов может помочь вам решить проблему. Я сделал это в коде, который вы видите. Оказывается, что перемещение кнопок вместо «встроенного блока» устраняет обе проблемы, с которыми вы сталкиваетесь. Встроенный блок специально добавляет туда немного места, плавающий — нет. Кроме того, из-за дополнительного пространства ваши 25% кнопок переносятся.