Html 如何在div中对齐列表？

我需要做一个垂直菜单，文本太远了，你可以在这里看到。如何调整列表以使其适合div

正文{
背景色：#018c24
}
李{
列表样式：无；
}
孔多尔先生{
背景色：白色；边距：自动；宽度：70%；高度：800px；
填充顶部：4px；边框：2px纯黑；边框半径：4px；
左侧填充：4px；底部填充：4px；右侧填充：4px；
}
.横幅{
背景图片：url(http://www.librosweb.es/website/css/images/logo.gif);
宽度：99%；边距：自动；高度：15%；边框半径：4px；
}
.关于{
显示：表格；边距：0自动；文本转换：大写；
页边空白：10px；字体系列：无衬线；字体大小：粗体；
颜色：绿色；
}
.关于李{
显示：内联；边距：3px；光标：指针；
}
.关于李：悬停{
背景：#f09d28；颜色：#000；
}
.关于p{
边框半径：4px；显示：无；背景颜色：#f15647
}
.导航{
宽度：20%；高度：81%；边框：2倍纯黑；
边框半径：4px；浮动：左侧；
}
美国海军{
文本对齐：左对齐；
}
校长{
宽度：78%；高度：81%；边框：2倍纯黑色；浮动：右侧；
边界半径：4px；
}

蒂图罗·德埃斯塔·帕吉纳

魁内斯索莫斯
CACAasd
德恩德·埃斯塔莫斯
CACAasd
联系人
卡卡萨德



AAAAAAAAAAAA
bbbbbbbbbbbb
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
dddddddddddd
依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依
FFFFFFFF
GGGGGGGGGGGG
HHHHHHHHHHHHHH
IIIIIIIII
JJJJJJJJJJJJJJ
kkkkkkkkkkkkkkkk
llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll
嗯
nnnnnnnnnnnnnn
尼尼尼尼尼尼尼尼尼尼尼尼尼尼尼
呜呜呜呜
PPPPPPPPPP
QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ
rrrrrrrrrrrrrrrrrrrrrrrr
SSSSSSSSSS
ACA

基本上，您的

ul

标记（默认情况下）应用了填充/边距。所以，我们可以在CSS中删除它

此外，由于菜单项没有任何空格，这些空格通常会从框中弹出。在

li

标记中使用了CSS来防止这种情况（单词break:break-word；）。当然，真正的菜单项可能有空格

正文{
背景色：#018c24
}
李{
列表样式：无；
}
孔多尔先生{
背景色：白色；
保证金：自动；
宽度：70%；
高度：800px；
垫面：4px；
边框：2件纯黑；
边界半径：4px；
左侧填充：4px；
垫底：4px；
右侧填充：4px；
}
.横幅{
背景图片：url(http://www.librosweb.es/website/css/images/logo.gif);
宽度：99%；
保证金：自动；
身高：15%；
边界半径：4px；
}
.关于{
显示：表格；
保证金：0自动；
文本转换：大写；
边缘顶部：10px；
字体系列：无衬线；
字体大小：粗体；
颜色：绿色；
}
.关于李{
显示：内联；
保证金：3倍；
光标：指针；
}
.关于李：悬停{
背景#f09d28；
颜色：#000；
}
.关于p{
边界半径：4px；
显示：无；
背景色：#f15647
}
.导航{
宽度：20%；
身高：81%；
边框：2件纯黑；
边界半径：4px；
浮动：左；
}
美国海军{
文本对齐：左对齐；
填充：0px；
边际：0px；
}
李国荣先生{
断字：断字；
}
校长{
宽度：78%；
身高：81%；
边框：2件纯黑；
浮动：对；
边界半径：4px；
}

蒂图罗·德埃斯塔·帕吉纳

魁内斯索莫斯
CACAasd
德恩德·埃斯塔莫斯
CACAasd
联系人
卡卡萨德



AAAAAAAAAAAA
bbbbbbbbbbbb
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
dddddddddddd
依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依依
FFFFFFFF
GGGGGGGGGGGG
HHHHHHHHHHHHHH
IIIIIIIII
JJJJJJJJJJJJJJ
kkkkkkkkkkkkkkkk
llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll
嗯
nnnnnnnnnnnnnn
尼尼尼尼尼尼尼尼尼尼尼尼尼尼尼
呜呜呜呜
PPPPPPPPPP
QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ
rrrrrrrrrrrrrrrrrrrrrrrr
SSSSSSSSSS
ACA

您可以添加此选项

.nav {overflow:hidden}

及

使用或开发工具时很容易。

ul{padding:0}