我只是想知道是否有人可以告诉我，如果我正确地设计这个样式呢？ 用我的CSS和HTML这样
#bulletsBox{
position: relative;
height: 382px;
width: 736px;
padding-top: 40px;
padding-bottom: 48px;
padding-right: 102px;
padding-left: 102px;
}
dl#Bullets,#Bullets2, #Bullets3, #Bullets4, #Bullets5, #Bullets6{
position: relative;
height: 210px;
width: 210px;
display: inline;
margin-right: 50px;
list-style-type: none;
}
#Bullets dt,#Bullets2 dt,#Bullets3 dt, #Bullets4 dt,#Bullets5 dt,#Bullets6 dt{
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
font-size: 14px;
color: #969b94;
text-transform: uppercase;
padding-bottom: 12px;
}
#Bullets dd,#Bullets2 dd ,#Bullets3 dd, #Bullets4 dd,#Bullets5 dd,#Bullets6 dd{
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
font-size: 12px;
color: #686869;
margin: 0px;
line-height: 18px;
}
<div id="bulletsBox">
<dl id="Bullets">
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl id="Bullets2">
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl id="Bullets3" style="margin:0px">
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl id="Bullets4">
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl id="Bullets5">
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl id="Bullets6" style="margin:0px">
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
</div><!--end of bulletsBox-->
它显示我在Dreamweaver中的所需方式，如this
但是当我在浏览器中查看它时，它看起来像this
答案 0 :(得分：1)
您可以摆脱display:inline上的#Bullets dt,#Bullets2 dt,#Bullets3 dt, #Bullets4 dt,#Bullets5 dt,#Bullets6 dt，而只需添加float:left。
您还需要更正margin:0px和#Bullets3上的#Bullets6的内嵌样式，并将其替换为margin-right:0px，因为我认为这是{{1}你要覆盖的值。
最后，只需使用margin来引用其中的所有#bulletsBox dl元素。更容易阅读和写作：）
答案 1 :(得分：0)
您需要将float:left;添加到规则dl#Bullets, #Bullets2, #Bullets3, #Bullets4, #Bullets5, #Bullets6 {...
这是 jsFiddle example 。
答案 2 :(得分：0)
你工作太辛苦了。让CSS继承做这项工作。所有这些额外的类名都不是必需的。
注意：除非您打算在子元素上使用绝对定位，否则不需要使用position:relative。
<div id="bulletsBox">
<dl>
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl>
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl>
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl>
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl>
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl>
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
</div>
CSS：
#bulletsBox {
height: 382px;
width: 736px;
padding-top: 40px;
padding-bottom: 48px;
padding-right: 102px;
padding-left: 102px;
}
#bulletsBox dl {
height: 210px;
width: 210px;
float:left; <--- added this
margin-right: 50px;
list-style-type: none;
}
#bulletsBox dt {
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
font-size: 14px;
color: #969b94;
text-transform: uppercase;
padding-bottom: 12px;
}
#bulletsBox dd {
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
font-size: 12px;
color: #686869;
margin: 0px;
line-height: 18px;
}