Question

我有一个带id的div元素。我里面也有列表项。我怎么会在div元素周围放置一个边框，但它里面什么都没有。我必须把列表项放在div元素本身里面。我的例子是geo-village.com

HTML：

<?php
    session_start();
?>
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="/navbarstyle.css">
    </head>
    <body>
        <div id=navbar>
            <ul>
                <li class=navbar_listitm><a href=/>Home</a></li>
                <li class=navbar_listitm><a href=/vatsim>VatSim Online Training</a></li>
                <li>
                    <div id=navbar_profile>
                        <?php
                            if ($_SESSION[loggedon] == true) {
                                echo "<a href=/profile>Good Day, $_SESSION[sessionun]</a>";
                            }
                        ?>
                    </div>
                </li>
            </ul>
        </div>
    </body>
</html>

CSS：

#navbar {
    background-color: #33ccff;
    padding: 5px;
    border-style: groove;
    border-color: darkblue;

}

#navbar li, #navbar a {
    text-decoration: none;
    display: inline;
    color: blue;
    font-size: 20px;
    font-weight: bold; 
    padding-left: 5px;
    padding: 7px;
}

.navbar_listitm {
    border-color: black;
    border-right-style: solid;
}

#navbar a:hover {
    color: cyan;
}

#navbar ul {
    margin: 0px;
    padding-left: 0px;
}

#navbar_profile {
    float: right;
    border-color: black;
    border-left-style: solid;   
}

Answer 1

如果您使用

#id {
  border: 1px solid black;
}

它应该只添加到div，而不是内部的任何内容。

要将其添加到里面的列表项中，您必须执行以下操作：

#id * {
  border: 1px solid black;
}

Answer 2

您在class=navbar_listitm元素上使用<li>。然后在CSS中，您有一个设置为该类的边框。如果删除它，边框也应该消失。

您的HTML：

<div id=navbar>
        <ul>
            <li class=navbar_listitm><a href=/>Home</a></li>
            <li class=navbar_listitm><a href=/vatsim>VatSim Online Training</a></li>
            <li>

你的CSS：

.navbar_listitm {
border-color: black;
border-right-style: solid;

}

所以你选择特定的部分，只是你已经给它一个你可能不打算给它的课。

如何选择特定部分

2 个答案: