Я хотел бы, чтобы кнопка с надписью Div
находилась в левом нижнем углу родительского 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>
Добавьте это в свой 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>
измените свой HTML и CSS следующим образом:
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;
}
Вы можете сделать это без использования 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;
}
Вы можете использовать тег nav для создания горизонтальных списков.