0

我希望Div标记为 s 的按钮位于父级的左下角，div而不是它们现在所在的位置（即左上角）。有没有办法在不单独为每个 div 使用绝对位置的情况下做到这一点？这是HTML和CSS。

CSS

.button
{
color: blue;
background-color: green;
width: 200px;
font-size: 20pt;
font-family: "Comic Sans";
position: relative;
float: left;
bottom: 0;
}

.button:hover
{
color: red;
background-color: purple;
 }     
#banner
{
height: 300px;
width: 80%;
background-color: pink;
position: absolute;
left: 10%;
right: 10%;
}

HTML 

<div id="banner">
        <div class="button" >Home</div>
        <div class="button">About Us</div>
        <div class="button">Contact Us</div>
        <div class="button">Disciplines</div>
</div>
4

4 回答 4

1

将此添加到您的CSS：

#buttonrow {
    position: absolute;
    bottom: 0;
    right: 0;
}

更改您的标记以包含一个包装器 div：

<div id="banner">

<div id="buttonrow">

<div class="button" >Home</div>
<div class="button">About Us</div>
<div class="button">Contact Us</div>
<div class="button">Disciplines</div>

</div>

</div>
于 2013-11-12T05:35:19.340 回答
0

您可以使用 nav 标签来创建水平列表视图。

于 2013-11-12T05:43:19.467 回答
0

像这样更改您的 HTML 和 CSS：

jsFiddle

HTML

<div id="banner">
    <div id="container">
        <div class="button" >Home</div>
        <div class="button">About Us</div>
        <div class="button">Contact Us</div>
        <div class="button">Disciplines</div>
    </div>
</div>

CSS

.button
{
color: blue;
background-color: green;
width: 200px;
font-size: 20pt;
font-family: "Comic Sans";
position: relative;
float: left;
bottom: 0;
}

.button:hover
{
color: red;
background-color: purple;
 }     
#banner
{
height: 300px;
width: 80%;
background-color: pink;
position: absolute;
left: 10%;
right: 10%;
}
#container{  /*  add this class  */
    position:absolute;
    bottom:0;
}
于 2013-11-12T05:37:38.283 回答
0

您可以通过设置不使用position:absolute.ie来做到这一点margin。

尝试这个：

.button {
background-color: #008000;
bottom: 0;
color: #0000FF;
float: left;
font-family: "Comic Sans";
font-size: 20pt;
margin-top: 268px;
position: relative;
width: 200px;
}

演示：http: //jsfiddle.net/z5UNd/

于 2013-11-12T05:41:25.233 回答