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>

更改：

/* visibility: hidden; */

到

或

完整代码如下所示：

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

塞尔肠
肠胃
受骗
奥斯雷钦德
锰轴

您是否尝试在按钮上显示

显示：内联

，

显示：内联块

，或

浮动：左

？您提供的代码不足以解释为什么您的按钮没有显示在一行中。根据您所给出的，在显示md模式后，一切都应该正常。显示md模式并设置el的代码在哪里元素的颜色，CSS的其余部分在哪里？我无法更改可见性，因为它会在单击按钮时弹出。即使我将文本对齐设置为居中，它看起来也像整个页面，然后使用

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

或

文本对齐：居中；

而不更改

/*可见性：隐藏；*/

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

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