想要一行中的按钮，而不是多行

Question

我的按钮目前看起来像这样

See here

我想将它们全部设置在一行:( 问题出在哪里

<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;
    }

Answer 1

更改：

/* visibility: hidden; */

到

text-align: center;

或

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

-DEMO-

完整代码如下所示：

 .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>