把两个项目符号列表放在同一个div左边/右边

在this页面的顶部，我在同一个空间中有两个项目符号列表名为“Artykułyo mnie w mediach”和“Moje publikacje”。把两个项目符号列表放在同一个div左边/右边

“Artykułyo mnie w mediach”在左侧显示。 “Moje publikacje”显示在右侧。

我添加了一个新的链接到左边的URL，然后增加了20px的大小.mediaomnielistright ul和.mediaomnielistleft然后它被打乱了。现在，不是在旁边显示一个列表，而是在顶部和底部显示一个列表。

我试图恢复所做的所有更改，但由于某些原因，它仍显示错误。

这是使用的CSS现在：

#col2{width:580px; height: auto;} 
.mediaomnielistright ul{margin-left:5px; list-style-type: circle; padding-left:20px;} 
.mediaomnielistleft ul{list-style-type: circle; padding-left:20px;} 
.mediaomnielist {overflow:auto; height:580px;} 
.mediaomnielistleft {width:310px; float:left; height:inherit;} 
.mediaomnielistright {width:288px; border-left-width:2px; border-style:dashed; border-color:#999; overflow: auto; height:inherit; 
}

任何人知道什么是错的？

来源

2013-10-25 Pikk

包含'div'的宽度是580px（用滚动条甚至更小）。你的两个孩子div元素的宽度等于598px（288 + 310）。它们太宽而不能在容器内并排安装。另一个孩子低于另一个孩子，因为你正在使用'float'，这就是它应该工作的方式。 – SombreErmine

你增加了左边的宽度？这意味着父母<div>没有足够的空间让他们并排显示。使用百分比代替使用绝对值：

mediaomnielistleft, mediaomnielistright { width:49%; }

由于在父div的右侧有一个滚动条，因此它不会加起来为100％。这大约需要16px。

或者你可以坚持使用实际宽度和改变

mediaomnielistright { width: 251px; }

来源

2013-10-25 10:19:19 ediblecode

谢谢，我真的很喜欢使用百分比的想法。我甚至会增加整个大专栏，因为我可以看到右边留有更多空间。链接和所有东西将更具可读性。有了％，我不必为每个div找到正确的像素大小而玩这么多。 – Pikk

@Pikk正确！如果你需要响应式网站，它往往会让事情变得更容易。 – ediblecode

580px小于310px + 288px，所以你只是没有空间容纳这些专栏。

来源

2013-10-25 10:17:25

.mediaonilist { width :580 px} 
.mediomnielistleft { width : 310 px} 
.mediomnielistleft { width : 290 px}

310 + 290 = 600 所以浮子被忽略。我不计算保证金和填充。

来源

2013-10-25 10:25:15 ColoO

把两个项目符号列表放在同一个div左边/右边

回答

相关问题