在 UL 中定位文本与 a 分开：答案

【问题标题】：Positioning text inside a UL separate to the a:在 UL 中定位文本与 a 分开：
【发布时间】：2020-05-22 19:11:45
【问题描述】：

CSS 101 的非常简单的问题，CSS 101 的非常简单的问题，CSS 101 的非常简单的问题，CSS 101 的非常简单的问题， CSS 101 的非常简单的问题，CSS 101 的非常简单的问题， CSS 101 的非常简单的问题，CSS 101 的非常简单的问题，

<div class="headercss">

    <div class="headerlogo">

    </div>

    <div class="nav">

        <ul>
            <li><a href="#home">BLINK</a>BLINK</li>
            <li><a href="#news">BLINK</a></li>
            <li><a href="#contact">BLINK</a></li>
            <li><a href="#about">BLINK</a></li>
        </ul>

    </div>



</div>

/* BODY */

body {
    margin: 0px;
}


.headercss {
    width: auto;
    height: 500px;
    position: relative;
}

.headerlogo {
    width: 980px;
    height: 250px;
    position: relative;
    left: 50%;
    margin-left: -490px;
}

.nav {
    width: 980px;
    height: 60px;
    position: relative;
    left: 50%;
    margin-left: -490px;
}

nav.ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav.ul.li {
    float: left;
}

a:link, a:visited {
    display: block;
    height: 58px;
    width: 243px;
}

a:hover, a:active {
}

【问题讨论】：

在您的 CSS 中，我看到您声明了一个名为 ul 的类，该类将针对导航。此外，您的一些导航根本不是类。请记住：element.class 将创建元素，只是该元素拥有该类，它的子项都不会拥有它
如果您想在 NAV 中定位 LI，请执行 > nav ul li {} 而不是 nav.ul.il {}
您的代码中的容器是什么，文本是什么？我不明白你的目标是什么..
这可能有助于指定你的最终目标是什么，你想准确地设计什么样式？

标签： html css class positioning

【解决方案1】：

ul 和 li 不是类，它们是标签。所以应该使用默认标签来定位，例如：

ul li {some style}

【讨论】：

不确定为什么要为同一个元素使用两个单独的标签，但为什么不使用 .nav li {background: red;} 作为背景颜色并设置链接文本的样式.nav li a {颜色：绿色；}