[英]align three buttons horizontally (left, center, right)
HTML
<div class="download-buttons">
<div class="download-button-wrapper">
<div id="dd" class="desktopBackground downloadFontIcons" tabindex="1">DESKTOP
<ul class="dropdown">
<li><a href="#">2560 x 1440</a></li>
<li><a href="#">1800 x 900</a></li>
</ul>
</div>
</div>
<div class="download-button-wrapper">
<div id="de" class="tabletBackground downloadFontIcons" tabindex="1">PHONE
<ul class="dropdown">
<li><a href="#">640 x 960</a></li>
<li><a href="#">1136 x 640</a></li>
<li><a href="#">720 x 1280</a></li>
</ul>
</div>
</div>
<div class="download-button-wrapper">
<div id="df" class="phoneBackground downloadFontIcons" tabindex="1">TABLET
<ul class="dropdown">
<li><a href="#">2560 x 1600</a></li>
<li><a href="#">2048 x 1536</a></li>
</ul>
</div>
</div>
<div style="clear:both"></div>
</div>
CSS
/*-----------download buttons------------------------*/
.download-button-wrapper{
*zoom: 1;
float: left;
width: 180px;
position: relative;
border: 1px solid #eaedf1;
color: #9ea7b3;
background-color: #F9FAFC;
text-align: center;
line-height: 44px;
font-size: .8em;
margin: 15px 12.700534759358288770053475935829% 0 0;
}
.download-buttons div:nth-child(3){
float: right;
margin-right: 0;
}
/* -----------GLOBALS - Dropdowns---------------*/
.downloadFontIcons{
cursor: pointer;
outline: none;
}
/*----------actual dropdown list----------------*/
.downloadFontIcons .dropdown{
/* Size & position */
position: absolute;
top: 110%;
left: 0px;
right: 0px;
/* Hiding */
opacity: 0;
pointer-events: none;
}
/*-------Media Queries---------*/
@media only screen
and (max-width : 1000px) {
#wallpaper-wrapper{
margin-left: 1.0416666666666666666666666666667%; /* 10px / 960px */
margin-right: 1.0416666666666666666666666666667%; /* 10px / 960px */
}
}
@media only screen
and (max-width : 820px) {
.download-button-wrapper{
margin: 15px 10.700534759358288770053475935829% 0 0;
}
}
首先,抱歉代碼/標記混亂。 但是我的問題是按鈕的對齊方式。 我無法相應地對齊它們(左,中,右),當前我正在使用浮點數來實現該目的,但是當窗口調整大小時,即使我對兩個按鈕使用了%邊距,最后一個元素也會降至下方。 還有其他方法可以做到這一點嗎? 左右對齊按鈕並使它們同時響應。
您可以嘗試在每個按鈕上設置margin: auto
。
如果這樣不起作用,您可以添加
.download-buttons {
display: flex;
display: ms-flex;
display: -webkit-flex;
{
到您的CSS。 它似乎在jsfiddle中工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.