Html 水平定位无序列表_Html_Layout_Css_Html Lists

Html 水平定位无序列表

html layout css

Html 水平定位无序列表,html,layout,css,html-lists,Html,Layout,Css,Html Lists,我有一个无序的列表，作为一个基本的导航栏我的目标是以60%的屏幕宽度和居中显示它。我遇到的问题是，它显示出一点偏心，大小也不尽相同。我使用外部样式表。任何帮助都将不胜感激以下是网页： <!DOCTYPE HTML> <html> <head> <title>Help</title> <link rel="stylesheet" type="text/css" href="Styles/

我有一个无序的列表，作为一个基本的导航栏

我的目标是以60%的屏幕宽度和居中显示它。我遇到的问题是，它显示出一点偏心，大小也不尽相同。我使用外部样式表。任何帮助都将不胜感激

以下是网页：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Help</title>
        <link rel="stylesheet" type="text/css" href="Styles/mainStyle.css"/>
        <meta charset="UTF-8">
    </head>
    <body>
        <h2>Home</h2>
        <ul>
            <li><a href="link.htm">Home</a></li>
            <li><a href="link2.htm">Link2</a></li>
            <li><a href="link3.htm">Link3</a></li>
        </ul>
        <div id="container">
            <p>
                Some Text. Some Text. Some Text. Some Text. Some Text.
            </p>
            <p>
                More Text. More Text. More Text. More Text. More Text.
            </p>
        </div><!-- End of container -->
    </body>
</html>

重置ul标签的填充。把这个放在css:ul{padding:0；}的开头

如果您想完全重置css，请转到：

您提供的代码对我来说很好。也许你在CSS中没有向我们展示其他东西？编辑：这是一把小提琴，指出你想要改变什么：你在Chrome浏览器中看过了吗？那是它正在播放的浏览器。是的，这就是我使用的。怎么了？如果你要重置，最好使用一个已经存在的reset.css表，它们已经过测试，这样就可以消除所有默认样式。非常感谢你，我不知道reset.css甚至存在。

h2
{
    /* Positioning */
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    /* Colours */
    background-color: #99CCCC;
    /* Border */
    border: 1px solid #000000;
    border-radius: 25px;
}
ul
{
    /* Positioning */
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
li
{
    /* Positioning */
    padding-left: 5px;
    padding-right: 5px;
    display: inline-block;
    vertical-align: top;
    /* Colours */
    background-color: #99DDBB;
    /* Border */
    border: 1px solid #000000;
    border-radius: 25px;
}
a
{
    /* Colours */
    color: #000000;
}
a:hover
{
    font-style: italic;
}
#container
{
    /* Positioning */
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
p
{
    /* Positioning */
    padding: 10px;
    text-align: left;
    /* Colours */
    background-color: #99CCCC;
    /* Border */
    border: 1px solid #000000;
    border-radius: 25px;
}
img
{
    /* Positioning */
    width: 50%;
    border: 1px solid #000000;
    border-radius: 25px;
}