我有 2 个图标需要与网站的左右边缘对齐,默认情况下左侧对齐,所以我的问题是将“nextArrowIcon”元素对齐到右侧。我正在尝试使用“ margin :自动”,但它不起作用。我需要它使用“:before”选择器工作。
如有任何帮助,我们将不胜感激。
PD:我更喜欢避免 float 解决方案。
这是相关代码。
h2#title{
margin:0;
padding:0;
font-size:1.8em;
font-family:Patua One;
position:absolute;
left:50%;
transform:translateX(-50%);
}
.buttons{
background:yellow;
}
.mainIcon:before{
content:url("http://i183.photobucket.com/albums/x312/Tiefnuker/main_icon_zpsrtoqnv5h.png");
}
.nextArrowIcon:before{
content:url("http://i183.photobucket.com/albums/x312/Tiefnuker/next_arrow_button_zps3skd2ok8.png");
margin-left:auto;
}
<header id="carouselHeader">
<h2 id="title">TITLE</h2>
<div class="buttons">
<a href="#"><i class="mainIcon"></i></a>
<a href="#"><i class="nextArrowIcon"></i></a>
</div>
</header>
这是一个 CODEPEN
最佳答案
将每一个a标签放入一个DIV中,使用绝对定位,左
或右
对齐。但是,请注意父 div 的样式必须为 position:absolute
或 position:relative
。 请注意,默认样式为 position:static
,这与 position:relative
几乎相同。
h2#title{
margin:0;
padding:0;
font-size:1.8em;
font-family:Patua One;
position:absolute;
left:50%;
transform:translateX(-50%);
}
.buttons{
position:relative;
background:yellow;
}
#btnLeft {position:absolute;left:0;}
#btnRight{position:absolute;right:0;}
.mainIcon:before{ content:url("http://i183.photobucket.com/albums/x312/Tiefnuker/main_icon_zpsrtoqnv5h.png");
}
.nextArrowIcon:before{
content:url("http://i183.photobucket.com/albums/x312/Tiefnuker/next_arrow_button_zps3skd2ok8.png");
margin-left:auto;
}
<header id="carouselHeader">
<h2 id="title">TITLE</h2>
<div class="buttons">
<div id="btnLeft">
<a href="#"><i class="mainIcon"></i></a>
</div>
<div id="btnRight">
<a href="#"><i class="nextArrowIcon"></i></a>
</div>
</div>
</header>
关于html - 将元素(使用 ':before' )向右对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36561541/