Html 如何将按钮置于div下
我试图让一个按钮在div下面,但是,按钮会向左浮动,而不是向右浮动。我正在努力实现这样的目标: 到目前为止,我们已经做到了: HTML: 事实上,我知道问题出在我的CSS上,但我不知道如何将按钮放在另一个div下面。代码笔是Html 如何将按钮置于div下,html,css,Html,Css,我试图让一个按钮在div下面,但是,按钮会向左浮动,而不是向右浮动。我正在努力实现这样的目标: 到目前为止,我们已经做到了: HTML: 事实上,我知道问题出在我的CSS上,但我不知道如何将按钮放在另一个div下面。代码笔是 .container{ 右边距:自动; 左边距:自动; 边缘底部:0px; } 梅因先生{ 边缘顶部:100px; 背景:url(“../img/Home img.jpg”); 高度:931.5px; 宽度:1920像素; 浮动:对; } .main标题{ 字体系列:“R
.container{
右边距:自动;
左边距:自动;
边缘底部:0px;
}
梅因先生{
边缘顶部:100px;
背景:url(“../img/Home img.jpg”);
高度:931.5px;
宽度:1920像素;
浮动:对;
}
.main标题{
字体系列:“Roboto”,无衬线;
字号:500;
字体大小:65px;
颜色:#000;
字母间距:2px;
线高:60px;
高度:120px;
宽度:641.6px;
边缘顶部:121px;
右边距:392.4px;
左边距:886px;
边缘底部:30px;
文本对齐:右对齐;
}
.maintext{
高度:68px;
宽度:489.6px;
右边距:392.4px;
文本对齐:右对齐;
浮动:对;
字体大小:24px;
颜色:#000;
字母间距:0;
线高:34px;
边际上限:0px;
字体系列:“Roboto”,无衬线;
字体大小:400;
边缘底部:30px;
}
.部分按钮{
明确:两者皆有;
浮动:对;
}
钮扣{
背景色:#1B325F;
字体系列:“Roboto”,无衬线;
字号:700;
边界:无;
填充:13px28.5px13px29px;
浮动:对;
文本对齐:居中;
文字装饰:无;
边界半径:2px;
边缘底部:20px;
文本转换:大写;
字号:18px;
颜色:#ffffff;
字母间距:-0.03px;
右边距:392.4px;
}
免费提货
和送货
我们为您的家庭或工作场所提供免费接送服务
了解更多
.container{
右边距:自动;
左边距:自动;
边缘底部:0px;
}
梅因先生{
边缘顶部:100px;
背景:url(“../img/Home img.jpg”);
高度:931.5px;
宽度:1920像素;
浮动:对;
}
.main标题{
字体系列:“Roboto”,无衬线;
字号:500;
字体大小:65px;
颜色:#000;
字母间距:2px;
线高:60px;
高度:120px;
宽度:641.6px;
边缘顶部:121px;
右边距:392.4px;
左边距:886px;
边缘底部:30px;
文本对齐:右对齐;
}
.maintext{
高度:68px;
宽度:489.6px;
右边距:392.4px;
文本对齐:右对齐;
浮动:对;
字体大小:24px;
颜色:#000;
字母间距:0;
线高:34px;
边际上限:0px;
字体系列:“Roboto”,无衬线;
字体大小:400;
边缘底部:30px;
}
.部分按钮{
明确:两者皆有;
浮动:对;
}
钮扣{
背景色:#1B325F;
字体系列:“Roboto”,无衬线;
字号:700;
边界:无;
填充:13px28.5px13px29px;
浮动:对;
文本对齐:居中;
文字装饰:无;
边界半径:2px;
边缘底部:20px;
文本转换:大写;
字号:18px;
颜色:#ffffff;
字母间距:-0.03px;
右边距:392.4px;
}
免费提货
和送货
我们为您的家庭或工作场所提供免费接送服务
了解更多
你是我的英雄。谢谢,你是我的英雄。谢谢
<div class="container">
<div class="main">
<div class="sectiontitle">
<h1 class="maintitle">Free Pick-Up<br>and Delivery</h1>
</div>
<div class="sectiondes">
<p class="maintext"> We offer a free pick up and delivery service to your home or place of work.</p>
</div>
<div class="sectionbutton">
<button href="#!" class="button">learn more</button>
</div>
</div>
</div>
.container {
margin-right: auto;
margin-left: auto;
margin-bottom:0px;
}
.main{
margin-top: 100px;
background: url("../img/Home-img.jpg");
height: 931.5px;
width: 1920px;
float: right;
}
.maintitle{
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 65px;
color: #000;
letter-spacing: 2px;
line-height: 60px;
height: 120px;
width: 641.6px;
margin-top: 121px;
margin-right: 392.4px;
margin-left: 886px;
margin-bottom: 30px;
text-align: right;
}
.maintext{
height: 68px;
width: 489.6px;
margin-right: 392.4px;
text-align: right;
float: right;
font-size: 24px;
color: #000;
letter-spacing: 0;
line-height: 34px;
margin-top:0px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
margin-bottom: 30px;
}
.sectionbutton{
float: right;
}
button{
background-color: #1B325F;
font-family: 'Roboto', sans-serif;
font-weight: 700;
border: none;
padding: 13px 28.5px 13px 29px;
float: right;
text-align: center;
text-decoration: none;
border-radius: 2px;
margin-bottom: 20px;
text-transform: uppercase;
font-size: 18px;
color: #ffffff;
letter-spacing: -0.03px;
margin-right: 392.4px;
}