-2

我喜欢我的代码显示的方式是

Name1      
Name2 Jim

它现在的做法是：

Name1 Name2  Jim

我怎样才能改变它，使它看起来像我想要的那样？

CSS

.display-left {
     float: left; 
     width: 200px; 
     text-align: left; 
     font-weight:bold   
}

.display-right {
     text-align: left;
}

HTML

<div class="display-left">Name1:   </div>
  <div class="display-right" > </div>
</div>
<div>
  <div class="display-left">Name2: </div>
  <div class="display-right">Jim </div>
</div>
4

4 回答 4

1

clear:left;最简单的方法是在您的课程中添加一个.display-left。还有一个float:left;你的显示权类

http://jsfiddle.net/f5cUx/3/

.display-left {
    float: left;
    width: 200px;
    text-align: left;
    font-weight:bold;
    clear:left;
}

.display-right {
    text-align: left;
    float:left; 
}

“ clear”属性指定在哪些边上不允许其他浮动元素。

我还刚刚注意到您已将每个“行”包装在一个 div 中。在这种情况下，您可以在那些清除浮动的“包装器” div 上放置一个新类。

http://jsfiddle.net/f5cUx/4/

于 2013-02-04T19:20:33.347 回答
0

如果添加：显示：块；到你的 .display-left 类，它可能会起作用。试试！

于 2013-02-04T19:24:51.840 回答
0

添加display:block到.display-right;. 这告诉 HTML 说“请占用整行”。您可以使用<br>标签，但这仅适用于一个示例。之后就是浪费代码

您也可以尝试添加clear:both;到display-right 这告诉 HTML 说“跳出浮动并始终保持在浮动下方”

于 2013-02-04T19:24:53.180 回答
-1

在 name1 之后但在 name2 之前将 a<br>在您的 html 中，这应该做您想要的或尝试<p></p

于 2013-02-04T19:19:36.857 回答