Question

我试图将图标放在div的左侧和右侧。

但它不起作用，你可以在我的小提琴中看到：http://jsfiddle.net/L9rwhuor/2/

左侧图标不是垂直方向的中心，右侧图标位于右下方而不是中心。

你知道为什么不能正常工作吗？

HTML：

<div id="container">
    <div class="box-left">
        <div class="box-left-up">
            <h2>Test</h2>
            <div class="text">
                <i class="fa fa-chevron-circle-left" style="float:left; margin-top:15px;"></i>
                <p>test 1</p>
                <p>test 2</p>
                <p>test 2</p>
                <p>test 2</p>
                <i class="fa fa-chevron-circle-right" style="clear:both;float:right; margin-top:15px"></i>
            </div>
        </div>
    </div>
</div>

CSS：

* {
    margin: 0;
    padding: 0;

}
h1 {
    text-align: center;
}

#container {
    margin: 0 auto;
    width: 960px; 
}

#container .text{
    text-align: center;
}

#container h2{
    text-align: center;
    padding: 10px;
    border-bottom: 2px solid #444;
}
#container .box-left{
    float: left;
    width:  480px;
    background: green;
}

Answer 1

在这种情况下，我甚至不愿意花车。这是绝对定位的好地方。

.text {
   position: relative;
}

.right-button {
   position: absolute;
   right: 0;
   top: 15px;
}    

.left-button {
   position: absolute;
   left: 0;
   top: 15px;
}

http://jsfiddle.net/L9rwhuor/3/

Answer 2

更改元素的顺序

<i class="fa fa-chevron-circle-left" style="float:left; margin-top:15px;"></i>
<i class="fa fa-chevron-circle-right" style="float:right; margin-top:15px"></i>    
<p>test 1</p>
<p>test 2</p>
<p>test 2</p>
<p>test 2</p>

在div中定位图标

2 个答案: