0

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

在此处输入图像描述

在此处输入图像描述 这是我的代码： 

            <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;
    }
​

提前致谢！

4

2 回答 2

0

将css添加到标签

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

演示

于 2012-11-08T08:26:44.413 回答
0

我建议您对每个 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>

于 2012-11-08T08:29:06.433 回答