对齐段落

Question

我正在尝试创建一个Q＆amp; A平台，但我在调整所有段落方面遇到了困难。如果我设置了相对定位，则文本开始与其左侧的内容重叠。如果我将其设置为绝对值，则高度不会调整，并且它开始与下一段重叠。我该如何解决这个问题？

这是我的代码：                 

            <div class="question">
                {% if the_question %}
            <ul>
            {% for question in the_question %}
                <li>
                    <div class="votecounter"><div class="numbercount">15</div> Votes</div>
                         <div class="votearrowdiv">
                            <a href="#"><div class="upvotearrow"></div></a>
                            <a href="#"><div class="downvotearrow"></div></a>
                        </div>
                    <a href="/home/{{ movie.id }}/{{ question.id }}/">{{ question.question_text }}</a>
                </li>
            {% endfor %}
            </ul>
        {% else %}
            No questions have been asked.
        {% endif %}
        </div>

    </div>​




.questionvotecontainer{
position:absolute;
border:0px solid purple;
text-align:left;
left:5;
float:left;
display:inline-block;
width:100%;
margin-top:14px;
margin-bottom:4px;
min-width:840;

}
.votecounter{
width:8%;
height:50px;
border:0px solid yellow;
text-align:center;
position:relative;
display:inline-block;
float:left;
font-size:12px;
}
.votearrowdiv{
position:relative;
float:left;
width:4%;
min-height:20px;
border:0px solid gray;
display:inline-block;
min-width:50px;
}
.question{
text-align:left;
width:83%;
height:auto;
display:inline-block;
border:0px solid green;
font-size:18px;
font-weight:bold;
font-family:'Source Sans Pro', sans-serif; font-weight:300;
margin-left:-10px;
padding-bottom:20px;
float:left;
overflow:scroll
min-width:10px;
}
.questionHover{
background-color:#111111;
}
.question ul li{
list-style-type:none;
padding-bottom:10px;
padding-top:2px;
border:1px solid yellow;
width:120%;
min-height:30px;
margin-left:-20px;
overflow:visible;
}
.upvotearrow{
border-bottom:14px solid white;
border-left:14px solid transparent;
border-right:14px solid transparent;
display:inline-block;
margin-top:5px;
position:absolute;
top:0px;
z-index:50;
}
.downvotearrow{
width:0px;
height:0px;
border-top:14px solid #969696;
border-left:14px solid transparent;
border-right:14px solid transparent;
display:inline-block;
position:absolute;
margin-top:26px;
z-index:50;
}
.numbercount{
font-size:24px;
font-weight:bold;
}

.actualQuestion{
    margin-left:40px;
    position:relative;
    }
​

提前致谢！

Answer 1

将css添加到标记

a{overflow:auto;  float:right; width:84%}​

<强> DEMO

Answer 2

我建议你为每个ListItem使用类似2列div布局的东西：左边有一个固定宽度的div左边浮动，右边你有一个跨越水平空间其余部分的div。

我已经像这样快速模拟它，使用CSS内联：

<li>
<!-- left div, fixed width -->
<div style="width: 100px; float: left; backgound: gray;">
    <div class="votecounter">
        <div class="numbercount">215</div> Votes
    </div>
    <div class="votearrowdiv">
        <a href="#"><div class="upvotearrow"></div></a>
        <a href="#"><div class="downvotearrow"></div></a>
    </div>
</div>                    
<!-- right div, rest of the width us-->                      
<div style="margin-left: 100px; margin-right: 0px;background: orange;">
    <a href="/home/{{ movie.id }}/{{ question.id }}/">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in est nunc. Etiam pharetra tortor pellentesque tellus accumsan ut rutrum nisi pretium. Donec dignissim sem vel lorem hendrerit elementum. Vestibulum gravida, quam vehicula hendrerit mattis, nulla nisl egestas ipsum, suscipit sagittis urna urna ut risus. Nunc blandit placerat arcu, sed bibendum lectus mattis ut. Sed feugiat dictum molestie. Quisque molestie interdum libero, id convallis tortor congue in. Suspendisse eu turpis mi. </a>
</div>