Question

我希望代码显示的方式是

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>

Answer 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" property指定不允许其他浮动元素的哪一侧。

我也注意到你已经在div中包装了每个“行”。在这种情况下，你可以在那些清除浮动的“包装”div上添加一个新类。

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

Answer 2

如果你添加：显示：块; 你的.display-left课程可能会有用。尝试一下！

Answer 3

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

您还可以尝试将clear:both;添加到display-right 这告诉HTML说“突破浮动并始终保持在浮动之下”

Answer 4

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

css没有显示内联

4 个答案: