在 HTML 和 CSS 中格式化导航的 li 和 ul 元素时遇到问题

Question

我正在尝试格式化 HTML 和 CSS 中的导航及其下拉菜单。

我有两个问题。

首先，导航右侧有space。但它应该像左边一样全部向右。

其次，我无法让下拉项彼此对齐。你能告诉我右边space和下拉项的问题在哪里吗？

/* Navi*/
 nav ul {
    margin-top: 0;
    background-color: #FFF;
    list-style: none;
    padding: 0;
    margin-left:0;
}
nav ul li {
    display: block;
    float:left;
    background-color: #1C1C1C;
    width: 33%;
    text-align:center;
}
nav a {
    display: list-item;
    color: #FFF;
    font-size: 23px;
    line-height: auto;
    text-decoration: none;
    letter-spacing: 4px;
}
/* Dropdowns verstecken */
 nav ul ul {
    display: none;
    position:fixed;
}
/* DropDowns */
 nav ul ul li {
    width: auto;
    display: block;
    float:left;
    /*Üposition:relative;*/
    padding-left:0;
    margin-left:0;
}
/* DropDowns anzeigen */
 nav ul li:hover > ul {
    display: inherit;
}
/* Highliting wenn angezeigt */
 nav a:hover {
    background-color: #000000;
    border-bottom: solid;
    border-bottom-color: #8E96C0;
}
#kopfzeile {
    position: fixed;
    width: 1000px;
    height: 60px;
    background-color: #fa8072;
    font-family: Quicksand;
    opacity: 0.95;
    margin:auto;
}
a {
    color: #FFF;
}

 <div id="kopfzeile">
        <nav>
            <ul>
                <li><a href="#anker_id_html">| HTML+ |</a>

                    <!-- Erstes Drop Down -->
                    <ul>
                        <li><a href="#">Was ist HTML?</a>
                        </li>
                        <li><a href="#">Befehlsübersicht</a>
                        </li>
                        <li><a href="#">Beispiele</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#anker_id_css">| CSS+ |</a>

                    <!-- Zweites Drop Down -->
                    <ul>
                        <li><a href="#">Was ist CSS?</a>
                        </li>
                        <li><a href="#">Befehlsübersicht</a>
                        </li>
                        <li><a href="#">Beispiele</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#PHP">| PHP+ |</a>

                    <!-- Drittes Drop Down -->
                    <ul>
                        <li><a href="#">Was ist PHP</a>
                        </li>
                        <li><a href="#">Befehlsübersicht</a>
                        </li>
                        <li><a href="#">Beispiele</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>

祝你有愉快的一天，奥尔克

Answer 1

要实现这一点，您需要进行多项更改。

Note: Before staring i guess you might have body{margin:0px;}. If not add it, but only if you want nav bar to leave no space.

1) 提供（添加）您的 nav width:100%; & margin:0px;。除了你的 nav 没有触及右侧的原因是你需要给你的 #kopfzeile.

width:100%;

nav {
    margin:0px;
    width:100%;
}
#kopfzeile {
    width: 100%; /* CHANGED */
}

2) 现在通过将 float:none; 赋给 nav ul ul li{...} 来删除 float:left;，使它们垂直堆叠。除此之外，如果您想要左侧的文字，还可以添加 left-align:left;

nav ul ul li
{
  float:none;
  text-align:left; /* Only if you want text left aligned*/
}

更新如下：

3) 用于整理到 li 宽度。你有 width:33%; 这不是实际划分 100% 所以你需要把它 width:33.33%;

nav ul li {
  display: block;
  float:left;
  background-color: #1C1C1C;
  width: 33.33%; /* JUST CHANGED THIS ONE */
  text-align:center;
}

JsFiddle : Updated

在 HTML 和 CSS 中格式化导航的 li 和 ul 元素时遇到问题

Having trouble formatting the li and ul elements of a navigation in HTML and CSS

html

css

navigation

html-lists