Question

所以，我是编程新手（第3天），我的按钮出了问题。

问题是我希望每个按钮都与其他按钮相邻，而不是在上面。

我尝试过各种各样的职位。但它们都不起作用。

我的css：

#about {
    margin: 0 auto;
    width: 200px;
    border:navy solid;
    display: block;
}

#forum {
    margin: 0 auto;
    width: 200px;
    border:navy solid;
    display: block;
}

#shop {
    margin: 0 auto;
    width: 200px;
    border:navy solid;
    display: block;
}

HTML：

<ul>
    <div id="about"><a href="/about/">About</a></div>
    <div id="forum"><a href="/forums/">Forums</a></div>
    <div id="shop"><a href="/shop/">Shop</a></div>

</ul>

我做错了什么？（抱歉我的英语不好）。

Answer 1

由于您在所有元素上使用相同的样式，因此可以使用类而不是id。

HTML

<input type="button" class='classname' />
<input type="button" class='classname' />
<input type="button" class='classname' />

CSS

.classname {
    margin: 0 auto;
    width: 200px;
    border:navy solid;
    display: inline-block;
}

您需要更改的是：

display：block;

要

display：inline-block;

Answer 2

我猜你的按钮正在当前页面的一列中心。

试试这个：

<强> HTML

<ul id="button_list">
    <li class="button" id="about">About</li>
    <li class="button" id="forum">Forum</li>
    <li class="button" id="shop">Shop</li>
</ul>

<强> CSS

#button_list {
    padding-left: 0px;
}

#button_list li {
    list-style: none;
    display: inline;
    margin-right: 10px;
}

小提琴：http://jsfiddle.net/patrickbeeson/v9307r0f/

样式按钮使用CSS彼此相邻

2 个答案: