html - 无法使 css 显示 html

Question

我有一个 html 页面和 css 来应用到这个 html。

HTML 代码

<label>id</label>              <span>1</span>
<label>Name</label>            <span>My name is</span>
<label>Address</label>         <span>Address, Address 2, Address 3, UK</span>

CSS 代码

label{
    min-width: 200px;
    float: left;
}
span{
    margin-left:5px;
}

我想这样显示 HTML

Id:              1
Name:            My name is
Address:         Address, Address 2, Address 3, UK

但我的代码以这种方式显示。

Id:              1
Name:            My name 
is
Address:         Address, Address 2, 
Address 3, UK

我该如何纠正这个。

Answer 1

您可以尝试添加 display:block; 和空白：nowrap；到跨度 css。jsfiddle

但是，我确实认为您应该使用表格进行探索。当您想要显示数据时，表格是很好的选择。

Answer 2

将其包裹在 Divs 中？我在 cssdesk.com 上试了一下，效果很好：

<div><label>id</label><span>1</span></div>
<div><label>Name</label><span>My name is</span></div>
<div><label>Address</label><span>Address, Address 2, Address 3, UK</span></div>