Question

我正在使用FAQS页面的定义列表，我喜欢它的语义。我有一个唯一内容为A:的范围，我希望答案文本不会跨越范围。我只能把它包起来，或者跳到新的一行。我试图尝试使用标记，但这只会变得混乱（我确信这可以清除很多）。我也尝试过绝对定位，但我无法弄清楚如何在<dd>标签内做到这一点。

这是我到目前为止所拥有的 http://jsfiddle.net/nhHma/1/

这是标记：

<dl>

    <dt class="faqQ">How much wood could...?<span class="show_answer"></span></dt>
    <dd class="faqA"><p><span class="answer_icon">A:</span><span class="answer_text_one">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p></dd>

    <dt class="faqQ">What is the average airspeed...?<span class="expand"></span></dt>
    <dd class="faqA"><span class="answer_icon">A:</span><span class="answer_text_two">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></dd>

</dl>

dt { 
    font: normal 1em 'Droid Serif', "Lucida Grande", Lucida, Arial, Verdana, sans-serif; 
    font-weight: light;
    padding: 0;  
    margin-top: .5em; 
    display: inline-flex; 
    clear: both;
}
dd { 
    font: italic 1em 'PT Sans', 'Helvetica Neue', "Helvetica", sans-serif;
    color: darken(@mid_gray_color, 25%);
    padding-left: 1em;
    margin: .15em 0 1em 1em;
    display: block;

    .answer_icon {
        display: inline-block;
        font: italic normal 2em Times, serif;
        float: left;
        margin-right: .3em;
    }
    .answer_text_two {
        float: left;
    }
}

谢谢！

编辑：对不起，我想我的解释并不是很清楚。我希望文本在A:的正确位置，但我希望它都是左对齐的，而不是在A:下面。这有意义吗？

像这样：

A:  Lorem ipsum dolor sit amet, consectetur adipisicing elit.... 
    Placeat, esse, saepe, voluptas molestiae ex laborum ducimus cumque accusantium recusandae unde dicta sed assumenda quasi aspernatur nobis consectetur culpa aperiam perspiciatis!

不喜欢这样：

A:  Lorem ipsum dolor sit amet, consectetur adipisicing elit.... 
Placeat, esse, saepe, voluptas molestiae ex laborum ducimus cumque accusantium recusandae unde dicta sed assumenda quasi aspernatur nobis consectetur culpa aperiam perspiciatis!

Answer 1

你是说这个意思吗？：

<dl>

    <dt class="faqQ">How much wood could...?<span class="expand"></span></dt>
    <dd class="faqA"><p><span class="answer_icon">A:</span><span class="answer_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p></dd>

    <dt class="faqQ">What is the average airspeed...?<span class="expand"></span></dt>
    <dd class="faqA"><span class="answer_icon">A:</span><span class="answer_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></dd>

</dl>

dt { 
    font: normal 1em 'Droid Serif', "Lucida Grande", Lucida, Arial, Verdana, sans-serif; 
    font-weight: light;
    padding: 0;  
    margin-top: .5em; 
    display: inline-flex; 
    clear: both;

    &:after {
        content:'\bb';
        margin-left: .5em;
        color: darken(@mid_gray_color, 25%);
    }
}
dd { 
    font: italic 1em 'PT Sans', 'Helvetica Neue', "Helvetica", sans-serif;
    color: darken(@mid_gray_color, 25%);
    padding-left: 1em;
    margin: .15em 0 1em 1em;
/*      border-left: 3px solid @mid_gray_color; */
    display: block;

    .answer_icon {
        display: inline-block;
        font: italic normal 2em Times, serif;
        float: left;
        margin-right: .3em;
    }
    .answer_text {
        float: left;
        display:inline-block;
        width:400px;
        text-align:justify;
        padding-top:10px;
    }
}

http://jsfiddle.net/nucleo1985/nhHma/18/

希望这是你想要的。

Answer 2

尝试在jsfiddle中将此添加到.answer_text_two :(我不担心.answer_text_one）

.answer_text_two {
        float: right;
        width: 410px;
        margin: 5px 0;
    }

页边距和指定的宽度只是为了让它在jsfiddle中看起来很好，并且可以根据你想要它在实际页面上的大小进行更改，但你明白我的意思。

定义列表常见问题解答 - 避免将文本包含在图标</dd>周围的<dd>标记中

2 个答案: