Question

我有2个图标需要与网站的左右边缘对齐，左边是默认设置，所以我的问题是将'nextArrowIcon'对齐到右边。我正在尝试使用'margin：auto'，但它不起作用。我需要使用'：before'选择器。

任何帮助都将不胜感激。

PD：我更喜欢避免浮动解决方案。

以下是相关代码。

 

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

Answer 1

Put each a tag into a DIV, and use absolute positioning to align left or right. HOWEVER, note that the parent div must be styled either position:absolute or position:relative. Note that the default styling is position:static, which is almost identical to 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>

Answer 2

Add float:right such that:

.nextArrowIcon:before{  
content:url("http://i183.photobucket.com/albums/x312/Tiefnuker/next_arrow_button_zps3skd2ok8.png"); 
margin-left:auto;
float:right;
}

Hope this helps. :)

Answer 3

what i have done is i just gave .nextArrowIcon:before property to float right because by default it aligned left and i made background color !important. I didn't created any divs because you said,

I need it work using ':before' selector.

So, you can try following,

Here's the CODEPEN example

/********** FORMAT **********/
html, body, header, a, h2 {
	margin: 0;
	padding: 0;
	border: 0;	
	font: inherit;
	vertical-align: baseline;
}
html{
	width:100%;
	background:white;	
	font-family:'Open Sans', serif;
	font-size:10px;		
}
/********* CONTENT *********/
h2#title{
	font-size:2.4em;	
	font-family:Patua One;	
	position:absolute;  
	left:50%;
	transform:translateX(-50%);
}
.buttons{
	background:yellow !important; 
}


.mainIcon:before{	
	margin:0;
content:url("http://i183.photobucket.com/albums/x312/Tiefnuker/main_icon_zpsrtoqnv5h.png");	
}
.nextArrowIcon:before{	
float:right;
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>

对齐项目（使用'：before'）到右边

3 个答案: