Fatal编程技术网
  • html/
  • Html css下拉菜单上的间距问题，无法使文本居中，也无法消除多余的左侧空间

Html css下拉菜单上的间距问题，无法使文本居中，也无法消除多余的左侧空间

html css menu

Html css下拉菜单上的间距问题，无法使文本居中，也无法消除多余的左侧空间,html,css,menu,spacing,Html,Css,Menu,Spacing,好的，我创建了一个下拉菜单 在我添加ul和li标签之前，它的中心很好。现在它不会居中了。我尝试将左/右添加为自动，文本对齐居中，甚至进入div标记本身并将对齐居中，但没有任何效果。因此，我在一些菜单项上增加了额外的空间，但总体而言，没有任何东西看起来间隔合适 我的第二个问题是，在下拉列表中，似乎有一些额外的左侧间距，我不知道为什么会有或如何消除它。任何帮助都将不胜感激。谢谢大家! 这是我的HTML： <div id="menu" align="center"> <ul&

好的，我创建了一个下拉菜单

在我添加ul和li标签之前，它的中心很好。现在它不会居中了。我尝试将左/右添加为自动，文本对齐居中，甚至进入div标记本身并将对齐居中，但没有任何效果。因此，我在一些菜单项上增加了额外的空间，但总体而言，没有任何东西看起来间隔合适

我的第二个问题是，在下拉列表中，似乎有一些额外的左侧间距，我不知道为什么会有或如何消除它。任何帮助都将不胜感激。谢谢大家!

这是我的HTML：

<div id="menu" align="center">
    <ul>
        <!-- main ul tag -->
        <li><a href="#">Home</a>

        </li>
        <!-- close home li tag -->
        <li class="aboute"><a href="#">About Ebenezer</a>

            <ul>
                <!-- About Ebenezer menu -->
                <li class="aboute"><a href="#">Our History</a>
                </li>
                <li class="aboute"><a href="#">Our Pastor</a>
                </li>
                <li class="aboute"><a href="#">Services</a>
                </li>
            </ul>
            <!-- close About Ebenezer menu -->
        </li>
        <!-- close About Ebenezer li tag -->
        <li class="min"><a href="#">Ministries</a>

            <ul>
                <!-- Ministries menu -->
                <li><a href="#">Women</a>
                </li>
                <li><a href="#">Men</a>
                </li>
                <li><a href="#">Youth</a>
                </li>
            </ul>
            <!-- close Ministries menu -->
        </li>
        <!-- close Ministries li tag -->
        <li class="min"><a href="#">Community</a>

            <ul>
                <!-- Community menu -->
                <li><a href="#">Backpack Buddies</a>
                </li>
                <li><a href="#">Outreach</a>
                </li>
            </ul>
            <!-- close Community menu -->
        </li>
        <!-- close Community li tag -->
        <li class="min"><a href="#">Events</a>

            <ul>
                <!-- Events menu -->
                <li><a href="#">Calendar</a>
                </li>
                <li><a href="#">Events</a>
                </li>
            </ul>
            <!-- close Events menu -->
        </li>
        <!-- close Events li tag -->
        <li class="photos"><a href="#">Photos</a>

        </li>
        <!-- close Photos li tag -->
        <li class="non-list"><a href="#">Contact</a>

        </li>
        <!-- close Contact li tag -->
    </ul>
    <!-- end of main ul tag -->
</div>
<!-- end of menu -->
您可以通过为指定高度来修复菜单项之间的间距问题，并通过应用与为设置的高度相等的top来向下拖动子菜单

最好避免使用标签和属性，例如出于样式目的而对齐，并使用css进行样式设置。。？或者项目..？两者都是，如果我将菜单项的间距调整为较小的数字，home将更靠近左侧。在下拉列表的左边有一些奇怪的额外间距。在找吗？是的！这看起来像是我想要得到的。所以，如果我把字体变小，菜单上的单词间距就会出现问题。有办法解决这个问题吗？ 
#menu {
    height: 40px;
    width: 1104px;
    padding-top: 2px;
    background-color: #0c495c;
    margin-right: auto;
    margin-left: auto;
    font-family: choco;
    font-size: 38px;
    color: #FFFFFF;
    text-align: center;
}
#menu ul {
    padding: 0px;
    margin:0px 0px 0px 0px;
    text-align: center;
}
#menu ul li {
    float: left;
    position: relative;
    background-color: #0c495c;
    list-style-type: none;
    width: 150px;
    padding: 0px;
}
#menu ul li.non-list {
    float: left;
    position: relative;
    background-color: #0c495c;
    list-style-type: none;
    width: 100px;
}
#menu ul li.aboute {
    float: left;
    position: relative;
    background-color: #0c495c;
    list-style-type: none;
    width: 195px;
    margin-left: -10px;
    padding: 0px;
    left: 15px;
}
#menu ul li.min {
    left: 15px;
}
#menu ul li.photos {
    float: left;
    position: relative;
    background-color: #0c495c;
    list-style-type: none;
    width: 160px;
}
#menu ul li a {
    color: #FFF;
    text-decoration: none;
    display: block;
}
#menu ul ul {
    position: absolute;
    visibility: hidden;
}
#menu ul li:hover ul {
    visibility: visible;
}
#menu ul li ul li a:hover {
    color: #f3b830;
}
#menu ul li a:hover {
    color: #f3b830;
}

try it mate, i think its fine now, Im set a width as auto or 100%, remove some margin, left, and add small padding .. 

    <html><head><style>
#menu {
    height: 40px;
    width: 1104px;
    padding-top: 2px;
    background-color: #0c495c;
    margin-right: auto;
    margin-left: auto;
    font-family: choco;
    font-size: 38px;
    color: #FFFFFF;
    text-align: center;
}
#menu ul {
    padding: 0px;
    margin:0px 0px 0px 0px;
    text-align: center;
}
#menu ul li {
    float: left;
    position: relative;
    background-color: #0c495c;
    list-style-type: none;
    width: 150px;
    padding: 0px;
}
#menu ul li.non-list {
    float: left;
    position: relative;
    background-color: #0c495c;
    list-style-type: none;
    width: 100px;
}
#menu ul li.aboute {
    float: left;
    position: relative;
    background-color: #0c495c;
    list-style-type: none;
    width: auto;
    /* margin-left: -10px; */
    padding: 0px;
    /* left: 15px; */
}
#menu ul li.min {
    left: 15px;
}
#menu ul li.photos {
    float: left;
    position: relative;
    background-color: #0c495c;
    list-style-type: none;
    width: 160px;
}
#menu ul li a {
    color: #FFF;
    text-decoration: none;
    display: block;
    font-size: 30px;
    width: auto;
    padding: 0 5px;
}
#menu ul ul {
    position: absolute;
    visibility: hidden;
}
#menu ul li:hover ul {
    visibility: visible;
}
#menu ul li ul li {
    display: block;
    width: 100% !important;
}
#menu ul li ul li a:hover {
    color: #f3b830;
}
#menu ul li a:hover {
    color: #f3b830;
}
</style>

</head><body><div id="menu" align="center">
    <ul>
        <!-- main ul tag -->
        <li><a href="#">Home</a>

        </li>
        <!-- close home li tag -->
        <li class="aboute"><a href="#">About Ebenezer</a>

            <ul>
                <!-- About Ebenezer menu -->
                <li class="aboute" style="
    /* display: block; */
    /* width: 100%; */
"><a href="#">Our History</a>
                </li>
                <li class="aboute"><a href="#">Our Pastor</a>
                </li>
                <li class="aboute"><a href="#">Services</a>
                </li>
            </ul>
            <!-- close About Ebenezer menu -->
        </li>
        <!-- close About Ebenezer li tag -->
        <li class="min"><a href="#">Ministries</a>

            <ul>
                <!-- Ministries menu -->
                <li><a href="#">Women</a>
                </li>
                <li><a href="#">Men</a>
                </li>
                <li><a href="#">Youth</a>
                </li>
            </ul>
            <!-- close Ministries menu -->
        </li>
        <!-- close Ministries li tag -->
        <li class="min"><a href="#">Community</a>

            <ul>
                <!-- Community menu -->
                <li><a href="#">Backpack Buddies</a>
                </li>
                <li><a href="#">Outreach</a>
                </li>
            </ul>
            <!-- close Community menu -->
        </li>
        <!-- close Community li tag -->
        <li class="min"><a href="#">Events</a>

            <ul>
                <!-- Events menu -->
                <li><a href="#">Calendar</a>
                </li>
                <li><a href="#">Events</a>
                </li>
            </ul>
            <!-- close Events menu -->
        </li>
        <!-- close Events li tag -->
        <li class="photos"><a href="#">Photos</a>

        </li>
        <!-- close Photos li tag -->
        <li class="non-list"><a href="#">Contact</a>

        </li>
        <!-- close Contact li tag -->
    </ul>
    <!-- end of main ul tag -->
</div>
<!-- end of menu --></body></html>