Блог

Главная - Вопросы по программированию - Нужны кнопки в одной строке, а не несколько

Нужны кнопки в одной строке, а не несколько

#html #css

#HTML #css

Вопрос:

Мои кнопки в настоящее время выглядят так

Смотрите здесь

Я хочу установить их все в одну строку: (В чем проблема

 <div class="md-modal md-effect-6" id="div1">
<div class="md-content">
    <div>
        <button class="btn-3">Sehr-Gut</button>
        <button class="btn-4">Gut</button>
        <button class="btn-5">Befriedigend</button>
        <button class="btn-6">Ausreichend</button>
        <button class="btn-7">Mangelhaft</button>
        <input type="hidden" name="mjesto" id="mjesto"> 
    </div>
 </div>
</div>

Css

  .md-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 50%;
        max-width: 630px;
        min-width: 320px;
        height: auto;
        z-index: 2000;
        visibility: hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }


    .md-content {
        color: #fff;
        background: #e74c3c;
        position: relative;
        border-radius: 3px;
        margin: 0 auto;
    }

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

1. вы пробовали display:inline , display:inline-block , или float:left на кнопках?

2. Предоставленного вами кода недостаточно, чтобы понять, почему ваши кнопки не отображаются в одной строке. С тем, что вы указали, все должно работать после отображения md-modal . Где код, который показывает md-modal и задает цвет элементов, и где остальная часть CSS?

Ответ №1:

Изменить :

 /* visibility: hidden; */

Для

 text-align: center;

или

 .md-content [class^=btn]{ display:inline-block}

-ДЕМОНСТРАЦИЯ-

Полный код выглядит так:

  .md-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 50%;
        max-width: 630px;
        min-width: 320px;
        height: auto;
        z-index: 2000;
        /* visibility: hidden; */
        text-align: center;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }


    .md-content {
        color: #fff;
        background: #e74c3c;
        position: relative;
        border-radius: 3px;
        margin: 0 auto;
    }

HTML:

 <div class="md-modal md-effect-6" id="div1">
<div class="md-content">
    <div>
        <button class="btn-3">Sehr-Gut</button>
        <button class="btn-4">Gut</button>
        <button class="btn-5">Befriedigend</button>
        <button class="btn-6">Ausreichend</button>
        <button class="btn-7">Mangelhaft</button>
        <input type="hidden" name="mjesto" id="mjesto"> 
    </div>
 </div>
</div>

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

1. Я не могу изменить видимость, потому что она появляется при нажатии кнопки. Даже когда я устанавливаю выравнивание текста по центру, это выглядит так, как в этом примере Вся страница здесь страница

2. затем используйте .md-content [class^=btn]{ display:inline-block} или text-align: center; без изменения /* visibility: hidden; */