【问题标题】：3 DIV side by side wont align correctly3 DIV 并排不会正确对齐
【发布时间】：2015-09-16 14:39:25
【问题描述】：
我确定这对我来说是一个面部护理时刻，但需要一些新鲜的眼睛来看看并告诉我我做错了什么......因为我无法发现它！
右边最后一个按钮需要和其他两个对齐，请帮忙。
body {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
p {
line-height: 1.65em;
margin: 0 0 1em 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 1em 0;
font-weight: normal;
}
/* BUTTON CONTAINER */
#buttoncointainer {
width: 100%;
}
.buttontext {
font-size: 175%;
font: #fff;
}
/* LEFT BUTTON */
#arrowleft {
float: left;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-right: 3px;
position: relative;
}
#arrowleft:hover {
float: left;
width: 20%;
height: 40px;
background: #ECECEC;
}
.leftarrow {
float: left;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.leftarrow a:hover {
color: #006ec3;
}
.leftarrow a {
text-decoration:none;
color: #fff;
}
/* SHARE BUTTON */
#sharebutton {
width: 40%;
margin: 0 auto;
text-align: center;
background: #005698;
height: 40px;
border: 1px solid #005698;
}
#sharebutton:hover {
width: 40%;
text-align: center;
background: #006ec3;
height: 40px;
}
.fb-share-text {
color: #fff;
text-align: center;
}
.sbutton {
margin: 0 auto;
}
.sbutton a {
text-decoration:none;
display:block
}
.sbutton a:hover {
text-decoration:none;
display:block;
color: #006ec3;
}
/* RIGHT BUTTON */
#arrowright {
float: right;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-left: 3px;
position: relative;
}
#arrowright:hover {
float: right;
width: 20%;
height: 40px;
background: #ECECEC;
}
.rightarrow {
float: right;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.rightarrow a:hover {
color: #006ec3;
}
.rightarrow a {
text-decoration:none;
color: #fff;
}
<div id="buttoncointainer">
<div id="arrowleft">
<div class="leftarrow">
<p class="buttontext">
◄
</p>
</div>
</div>
<div id="sharebutton">
<div class="sbutton">
<p class="buttontext">
Share
</p>
</div>
</div>
<div id="arrowright">
<div class="rightarrow">
<p class="buttontext">
►
</p>
</div>
</div>
</div>
【问题讨论】：
标签：
html
css
button
alignment
【解决方案1】：
更改 html 的顺序以使代码生效...
float:right; 元素应位于居中对齐元素之前。
body {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
p {
line-height: 1.65em;
margin: 0 0 1em 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 1em 0;
font-weight: normal;
}
/* BUTTON CONTAINER */
#buttoncointainer {
width: 100%;
}
.buttontext {
font-size: 175%;
font: #fff;
}
/* LEFT BUTTON */
#arrowleft {
float: left;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-right: 3px;
position: relative;
}
#arrowleft:hover {
float: left;
width: 20%;
height: 40px;
background: #ECECEC;
}
.leftarrow {
float: left;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.leftarrow a:hover {
color: #006ec3;
}
.leftarrow a {
text-decoration: none;
color: #fff;
}
/* SHARE BUTTON */
#sharebutton {
width: 40%;
margin: 0 auto;
text-align: center;
background: #005698;
height: 40px;
border: 1px solid #005698;
}
#sharebutton:hover {
width: 40%;
text-align: center;
background: #006ec3;
height: 40px;
}
.fb-share-text {
color: #fff;
text-align: center;
}
.sbutton {
margin: 0 auto;
}
.sbutton a {
text-decoration: none;
display: block
}
.sbutton a:hover {
text-decoration: none;
display: block;
color: #006ec3;
}
/* RIGHT BUTTON */
#arrowright {
float: right;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-left: 3px;
position: relative;
}
#arrowright:hover {
float: right;
width: 20%;
height: 40px;
background: #ECECEC;
}
.rightarrow {
float: right;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.rightarrow a:hover {
color: #006ec3;
}
.rightarrow a {
text-decoration: none;
color: #fff;
}
<div id="buttoncointainer">
<div id="arrowleft">
<div class="leftarrow">
<p class="buttontext">
◄
</p>
</div>
</div>
<div id="arrowright">
<div class="rightarrow">
<p class="buttontext">
►
</p>
</div>
</div>
<div id="sharebutton">
<div class="sbutton">
<p class="buttontext">
Share
</p>
</div>
</div>
</div>
【解决方案2】：
我在这里给你做了一个小提琴http://jsfiddle.net/vmb0sfag/3/
在主要元素上使用左浮动：
body {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
p {
line-height: 1.65em;
margin: 0 0 1em 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 1em 0;
font-weight: normal;
}
/* BUTTON CONTAINER */
#buttoncointainer {
width: 100%;
}
.buttontext {
font-size: 175%;
font: #fff;
}
/* LEFT BUTTON */
#arrowleft {
float: left;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-right: 3px;
position: relative;
float: left;
}
#arrowleft:hover {
float: left;
width: 20%;
height: 40px;
background: #ECECEC;
}
.leftarrow {
float: left;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
float: left;
}
.leftarrow a:hover {
color: #006ec3;
}
.leftarrow a {
text-decoration:none;
color: #fff;
}
/* SHARE BUTTON */
#sharebutton {
float: left;
width: 40%;
margin: 0 auto;
text-align: center;
background: #005698;
height: 40px;
border: 1px solid #005698;
}
#sharebutton:hover {
width: 40%;
text-align: center;
background: #006ec3;
height: 40px;
}
.fb-share-text {
color: #fff;
text-align: center;
}
.sbutton {
margin: 0 auto;
}
.sbutton a {
text-decoration:none;
display:block
}
.sbutton a:hover {
text-decoration:none;
display:block;
color: #006ec3;
}
/* RIGHT BUTTON */
#arrowright {
float: right;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-left: 3px;
position: relative;
float: left;
}
#arrowright:hover {
float: left;
width: 20%;
height: 40px;
background: #ECECEC;
}
.rightarrow {
float: right;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.rightarrow a:hover {
color: #006ec3;
}
.rightarrow a {
text-decoration:none;
color: #fff;
}