Html 并排显示为两个div

我试图使用

内联块

并排粘贴两个div

然而，出于某种原因，它不仅会起作用。关于这一点，我有两个问题：

如何将

和

以下是我的CSS：

/*http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
许可证：无（公共域）
*/
html、正文、div、span、小程序、对象、iframe、，
h1、h2、h3、h4、h5、h6、p、块报价、预，
a、 缩写，首字母缩写，地址，大，引用，代码，
del、dfn、em、img、ins、kbd、q、s、samp、，
小、走向、强、次、辅助、tt、var、，
b、 u，i，中心，
dl，dt，dd，ol，ul，li，
字段集、表单、标签、图例、，
表格、标题、正文、tfoot、THAD、tr、th、td、，
文章、旁白、画布、细节、嵌入、，
图，figcaption，页脚，页眉，H组，
菜单、导航、输出、ruby、节、摘要、，
时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
}
/*旧浏览器的HTML5显示角色重置*/
文章，旁白，细节，图表，
页脚、页眉、H组、菜单、导航、节{
显示：块；
}
身体{
线高：1；
}
ol，ul{
列表样式：无；
}
区块报价，q{
报价：无；
}
blockquote:before，blockquote:after，
问：之前，问：之后{
内容：''；
内容：无；
}
桌子{
边界塌陷：塌陷；
边界间距：0；
}
/*通用CSS*/
身体{
背景色：#eeeeee；
字体系列：“时代新罗马”，佐治亚州，衬线；
字号：17px；
}
#包装纸{
宽度：970px；
保证金：0自动；
}
标题{
背景色：#dddddd；
填充：15px；
利润率：15px0；
}
收割台h1{
字体大小：40px；
字体大小：粗体；
}
导航{
背景色：#dddddd；
}
导航{
显示：内联块；
}
李国荣{
列表样式：光盘；
}
导航ul>li{
列表样式：圆形；
}
海军ulli a{
文字装饰：无；
}
文章{
显示：内联块；
背景色：#AAAAA；
利润率：20px0；
}
第h2条{
字体大小：30px；
字体大小：粗体；
利润率：20px0；
}
第二条{
列表样式：光盘；
利润率：15px0；
}
第1条{
字体大小：粗体；
}
页脚{
背景色：#dddddd；
利润率：15px0；
}
.边界{
-webkit边界半径：25px；
-moz边界半径：25px；
边界半径：25px；
填充：25px；
}

@洛普























. 普遍存在的可变状态伙伴程序更难处理。虽然这是个老消息，但大多数程序员不知道或不在乎。这是一个微不足道的，因为存在
。我有时会听到关于什么是语法糖或什么不是语法糖的争论。这是一种试图定义它的尝试
。大多数时候，“面向对象”实际上是指类。类只不过是语法糖，至少在静态类型语言中，例如java和C++。糖不是无用的，但回顾过去有助于我们更好地理解课堂
。“OO”这个词太多了，我们应该停止使用它。更好的替代品是“类”和“原型”
。课程是次优的。函数式编程要好得多

联系方式，建议：发送电子邮件至

用

要在导航旁边显示文章，只需设置文章的宽度：

article {
   width: 70%;
}

要移动子ul li，只需在其上添加边距：

#links > ul > li > ul > li > ul > li {
    margin-left: 20px;
}

对于您的列表样式：

#links > ul > li > ul > li {
  list-style-type: initial;
}
#links > ul > li > ul > li > ul > li {
  list-style: outside none circle;
}
#links > ul > li {
  list-style-type: none;
}

更新的JSFIDLE:

这是您的CSS：

nav{
    display: inline-block;
}
nav ul:first-child > li:first-child {
    list-style: none;
}
nav ul:first-child > li:first-child > a{
    position: relative;
    left: -20px;
}
nav > ul > li > ul > li {
    list-style: disc !important;
}

nav ul ul > li{
    list-style: circle !important;
    padding-left: 10px;
}


nav ul li a{
    text-decoration: none;
}

1. 两个

div

没有并排对齐的原因是它们没有足够的空间，可以在文章中添加

width

并使两个

div

垂直与顶部对齐

如果可能的话，我建议您在

文章

和

导航

nav {
    vertical-align: top;
    width: 20%;
}

article { 
    vertical-align: top;
    width: 69%;
}

2. 对于第二个问题，只需在

ul

类中添加

marginleft

ul { 
    margin-left: 10px
}

---

将宽度应用于两个容器（即导航和物品）应能解决此问题。在旁注中，*css选择器可用于任何元素。也许只有我，但第一个选择器看起来很大。给它们加起来的宽度小于包装宽度小于（减去水平边距和填充），并注释掉它们之间的空白（否则你会得到一个像在句子中一样的空格），你可能想使用直接子选择器来避免混淆。