Question

我正在使用css模板并根据我的要求进行修改。在其中，我遇到了以下代码：

<div id="wrapper">
  <div id="content-wrapper">
    <div id="content">
       <div id="a00">
      <h4>A Definition List</h4>
      <dl>
        <dt>Sixpence</dt>
        <dd> An awesome new template. <em> Created by <a href="http://www.nikhedonia.com/"     title="SimplyGold">Sadhana Ganapathiraju</a>. 
          Feel free to use it, modify it, and take it apart to learn from it. A mention     and a link isn't 
          required but much appreciated. I'll stop abusing the definition list now. ;-)     </em> </dd>
    </div>
  </div>
</div>

我缩短了上面的代码。上述元素的CSS部分是：

#wrapper
{
    clear: both;
    float: left;
    width: 100%;
    margin: 10px 0; 
    background: transparent url(../images/hr_dotted.gif) 60% 0 repeat-y; 
}

#content-wrapper
{
    width: 60%;
    float: left;
}

#content
{
    float: left;
    padding: 0 20px;
}

ul, ol, dl, blockquote, pre
{
    color: #999999;
    margin: 10px 35px; 
    padding: 10px 30px; 
    line-height: 1.6em;
    border: 1px solid #1a1a1a;
    border-top: 10px solid #151515;
    background: #404040 url(images/navigation_hover.gif) top left repeat;
}

dt
{
    margin: 0;
    color: #7799bb;
    font-size: 10px; 
    font-weight: bold;
    padding: 10px 0 2px; 
    text-transform: uppercase; 
}

dd { margin: 0; padding: 2px 0 5px; margin-bottom: 5px; border-bottom: 1px dotted #555555; }

在此，文字An awesome new template...位于Sixpence下方的新行中。我希望它出现在Sixpence面前。如何才能做到这一点？这可能是一个非常简单的问题，但我对CSS很新，所以请帮助：）

Answer 1

只需将'display：inline'设置为dt和dd类。

dt
{
    margin: 0;
    color: #7799bb;
    font-size: 10px; 
    font-weight: bold;
    padding: 10px 0 2px; 
    text-transform: uppercase; 
    display : inline;
}

dd { margin: 0; padding: 2px 0 5px; margin-bottom: 5px; border-bottom: 1px dotted #555555;  display : inline; }

以下是一个示例：http://jsfiddle.net/Fxse7/

删除css中的自动换行符

1 个答案: