Question

这是我工作的html代码。

<div id="menu">
    <center>
        <div style="list-style: none; class:" menu ">
            <div style="display: inline "><a href="indeks.html " class="button ">Home</a> </div>
            <div style="display: inline "><a href="indeks.html " class="button ">Repertuar</a> </div>
        </div> 
    </center> 
</div>

这是css部分

#menu {
    margin:20px;
    display: inline-block;
    padding: 20px;
    text-align: right;
}
.button {
    display : block;
    background: #ff0080;
    background: -webkit-linear-gradient(top, #ff0080, #ffb248);
    height: 50pxx;
    width : 100px;
    margin: 0;
    padding: 0;
    border : 2px solid rgba(33, 68, 72, 0.59);
    text-decoration: none;
}

我尝试了许多方法，搜索大量的教程，甚至挖掘了一些网站的源代码，但由于某种原因，我制作的2个按钮总是在另一个下面显示，而不是彼此相邻。

我试图制作一个菜单，似乎我搞砸了一些东西，我甚至找不到（用其他语言学习的问题而不是你自己的）。

Answer 1

你搞砸了HTML：）

替换

<div style="list-style: none; class:"menu">    <!-- wrong -->

使用：

<div style="list-style: none;" class="menu">   <!-- Correct -->

还有：

不推荐使用center代码。
要将按钮放在同一行，请使用display: inline-block代替display: inline
避免使用内联样式，因为您已经在使用css类。这有助于您将css代码保留在结构中。

<强> Working Fiddle

Answer 2

好的，我已经解决了这个问题（我注意到我很狡猾）。一直以来我都在写我的网站应该显示我的菜单内联和块中的按钮（因为我是个天才）。

无论如何，感谢所有看过它的人，但有时我只是那么愚蠢。

Answer 3

使用以下命令更改.button类css：

.button {
    background: #ff0080;
    background: -webkit-linear-gradient(top, #ff0080, #ffb248);
    height: 50pxx;
    width : 100px;
    margin: 0;
    padding: 0;
    border : 2px solid rgba(33, 68, 72, 0.59);
    text-decoration: none;
}

我无法将div中的对象放在同一行中

3 个答案:

还有：