試圖使固定用CSS

Question

h4 { 
 
    color:#ffffff; 
 
    font-size:20px; 
 
    letter-spacing:2px; 
 
    display:inline-block; 
 
    padding:0 10px; 
 
} 
 

 
i { 
 
    color:#ffffff; 
 
    font-size:20px; 
 
}

<div class="col-md-12"> 
 
    <i class="fa fa-angle-left" id="prev" aria-hidden="true"></i> 
 
    <h4 class="quotes" style="display:inline-block;"> 
 
    Web Devloper 
 
    </h4> 
 
    <h4 class="quotes" style="display:inline-block;"> 
 
    Web Designer 
 
    </h4> 
 
    <h4 class="quotes" style="display:inline-block;"> 
 
    Freelancer 
 
    </h4> 
 
    <i class="fa fa-angle-right" id="next" aria-hidden="true"></i> 
 
</div>

圖標如何使下一個和以前的圖標固定停留？這裏的問題：

Answer 1

加入圖標position: absolute;和父元素position: relative;。例如：

#block { 
 
    padding: 20px 70px; 
 
    background: green; 
 
    width: 300px; 
 
    position: relative; 
 
} 
 
#prev, #next { 
 
    position: absolute; 
 
    color: white; 
 
    top: 50%; 
 
    margin-top: -5px; 
 
    width: 10px; 
 
    height: 10px; 
 
    background: white; 
 
} 
 
#prev {left: 20px;} 
 
#next {right: 20px;}

<div id="block"> 
 
    <div id="next"></div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
    <div id="prev"></div> 
 
</div>

Answer 2

你可以使用花車

#prev {float:left;} 
#next {float:right;} 

或絕對定位

#prev {position:absolute;left:0;} 
#next {position:absolute;right:0;} 

也可能是Flexbox的方法，像

.col-md-12 {display:flex;width:100%;} 
h4 {flex:1 0 auto;} 
#prev,#next {flex:0 0 auto;}