Question

我有以下内容：

<div id="sbr">
    <div id="sbr_bdy">
        <div id="sbr_lnk">
            <div><a>test</a></div>
            <div><a>test</a></div>
            <div><a>test</a></div>
            <div><a>test</a></div>
            <div><a>test</a></div>
            <div><a>test</a></div>
        </div>
    </div>
</div>

和

#sbr_lnk a {
    border-bottom: 1px solid #CCCCCC;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFFF;
    float: left;
    height: 25px;
    line-height: 25px;
    padding-left: 10px;
    width: 180px;
}

#sbr { width: 200px; background-color: pink; }

#sbr_lnk div {
    height: 25px;
    margin-left: 10px;
    margin-right: 10px;
    width: 180px;
    background-color: yellow;
}

#sbr_lnk {
    padding-top: 25px;
    padding-bottom: 25px;
    background-color: green;
}

我希望看到的是：

1）sbr_lnk用作所有内部DIV和As的背景。现在它不是从上到下： 2）sbr_lnk内的DIV在右侧和左侧有10px的空间 3）As有弯曲的角落，只适合DIV内部。

我尝试了很多组合，但我认为我的主要问题是sbr_lnk。它似乎不是作为背景DIV工作。非常感谢帮助。

这是一个fiddle 内部地址链接是一个圆角矩形，在

内部为10px

Answer 1

您有太多样式应用于<a>代码。

将一些样式移动到包装器div，它将根据您的需要显示。

#sbr_lnk div {
    height: 25px;
    width: 180px;
    background-color: yellow;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 0 10px;
}

See the example here

Answer 2

也可以这样做：http://jsfiddle.net/7ttyT/34/为了保持标签的样式以保证可重用性，在一个div中有多个a。

对我的CSS布局感到困惑

2 个答案: