&!DOCTYPE&html&PUBLIC&&-//W3C//DTD&XHTML&1.0&Transitional//EN&&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html&xmlns=&http://www.w3.org/1999/xhtml&&
&meta&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&/&
#search{display:none}
#search&.box{&position:&width:75%;&padding:10px&20px&20px&20&background:#&z-index:999999;}
#search&.subm{&float:&cursor:pointer}
#search&dl{display:&width:101%;}
#search&.secondary{list-style:&width:50%;float:left}
#search&dt{font-size:14color:}
&div&class=&box&&
&dl&class=&actor&&
&dt&第一大类&/dt&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&一小类1&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类2&&&一小类2&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类3&&&一小类3&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类4&&&一小类4&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类5&&&一小类5&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类6&&&一小类6&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类7&&&一小类7&/label&&/dd&
&dl&class=&classification&&
&dt&第二大类&/dt&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&二小类1&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类2&&&二小类2&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类3&&&二小类3&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类4&&&二小类4&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类5&&&二小类5&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类6&&&二小类6&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类7&&&二小类7&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类8&&&二小类8&/label&&/dd&
&dl&class=&series&&
&dt&第三大类&/dt&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&三小类1&/label&&/dd&
&dl&class=&producers&&
&dt&第四大类&/dt&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&四小类1&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&四小类2&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&四小类3&/label&&/dd&
&dl&class=&publisher&&
&dt&第五大类&/dt&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&五小类1&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&五小类2&/label&&/dd&
怎么排成如图所示的样式呢？
回复讨论(解决方案)
改成这样即可：
&!DOCTYPE&html&PUBLIC&&-//W3C//DTD&XHTML&1.0&Transitional//EN&&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html&xmlns=&http://www.w3.org/1999/xhtml&&
&meta&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&/&
*{margin:0;&padding:0;}
.box{&position:&width:75%;&padding:10px&20px&20px&20&background:#&z-index:999999;}
.box&dl{display:&width:100%;}
.box&dt{font-size:14color:&line-height:30&font-weight:}
.box&dd{&width:49%;float:&line-height:30&}
&div&class=&box&&
&dl&class=&actor&&
&dt&第一大类&/dt&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&一小类1&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类2&&&一小类2&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类3&&&一小类3&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类4&&&一小类4&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类5&&&一小类5&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类6&&&一小类6&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类7&&&一小类7&/label&&/dd&
&dl&class=&classification&&
&dt&第二大类&/dt&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&二小类1&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类2&&&二小类2&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类3&&&二小类3&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类4&&&二小类4&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类5&&&二小类5&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类6&&&二小类6&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类7&&&二小类7&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类8&&&二小类8&/label&&/dd&
&dl&class=&series&&
&dt&第三大类&/dt&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&三小类1&/label&&/dd&
&dl&class=&producers&&
&dt&第四大类&/dt&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&四小类1&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&四小类2&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&四小类3&/label&&/dd&
&dl&class=&publisher&&
&dt&第五大类&/dt&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&五小类1&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&五小类2&/label&&/dd&
&!DOCTYPE&html&PUBLIC&&-//W3C//DTD&XHTML&1.0&Transitional//EN&&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html&xmlns=&http://www.w3.org/1999/xhtml&&
&meta&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&/&
*{margin:0;&padding:0;}
.box{&position:&width:75%;&padding:10px&20px&20px&20&background:#&z-index:999999;}
.box&dl{display:&width:100%;margin-bottom:50}
.box&dt{font-size:14color:&line-height:20&font-weight:}
.box&dd{&width:49%;float:&line-height:30&}
&div&class=&box&&
&dl&class=&actor&&
&dt&第一大类&/dt&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&一小类1&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类2&&&一小类2&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类3&&&一小类3&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类4&&&一小类4&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类5&&&一小类5&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类6&&&一小类6&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类7&&&一小类7&/label&&/dd&
&dl&class=&classification&&
&dt&第二大类&/dt&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&二小类1&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类2&&&二小类2&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类3&&&二小类3&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类4&&&二小类4&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类5&&&二小类5&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类6&&&二小类6&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类7&&&二小类7&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类8&&&二小类8&/label&&/dd&
&dl&class=&series&&
&dt&第三大类&/dt&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&三小类1&/label&&/dd&
&dl&class=&producers&&
&dt&第四大类&/dt&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&四小类1&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&四小类2&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&四小类3&/label&&/dd&
&dl&class=&publisher&&
&dt&第五大类&/dt&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&五小类1&/label&&/dd&
&dd&class=&secondary&&&label&&input&type=&checkbox&&value=&小类1&&&五小类2&/label&&/dd&
主要是发现dt不会强制换行导致的封面模板循环子栏目一行两列DIV+CSS成功实现
封面模板循环子栏目一行两列DIV+CSS成功实现
封面模板循环子栏目一行两列DIV+CSS成功实现
13:31:13 阅读30 评论 &&字号：大中小&
发表评论：
TA的最新馆藏[转]&[转]&[转]&[转]&[转]&[转]&DIV+cSS同一行左右对齐小女子有两个问题要问：1、在同一行如何使左边的文字左对齐,右边的文字右对齐.2、我想让整个页面自适应高宽度.我该如何布局.是不是用DIV很难实现,用table会容易实现些.能帮我举例吗?这二问题希望能浏览器兼容.第二个问题是如何让页面实现高、宽度自适用.如果我需要把这个页面放到其他页面的某一处,希望能自适用那个页面块的大小.还有很多浮动块里面还是需要设边距属性的,能有什么办法解决浮动双倍的错误吗?
TKsAtlas7Je
DIV高度自适应比较麻烦,你可以设置DIV元素的属性,padding-bottom:-10000margin-bottom:10000px实现,一个正值,一个负值,刚好抵消.但是这个必须设置父容器overflow:hidden否则在FF下,会出现页面很长的问题.文字左右对其,同一行,表格两列是最好的,分别用align left right实现,当然也可以用两个div一个左浮动,一个右浮动,并且分别设置text-align属性就可以了,浮动元素不要设置padding和margin属性,否则会浮动边距加倍错误.我说的是DIV的高度自适应父容器的高度,不知道你说的页面自适应高度怎么理解,如果是可以随内容而伸缩的话,不设置容器的高度就可以,都会自动拉伸的,设置了高度并且设置了overflow属性后就固定了高度.当然你可以像一楼的用li里面给span行内元素加float实现左右对其,方法很多,看你怎么实现,记住块级元素浮动不能使用边距属性就OK了
为您推荐：
其他类似问题
扫描下载二维码纯CSS实现：用一个元素的hover控制两个元素，比如有A和B两个元素，鼠标移到A上，A变红，B变蓝。_百度知道