web-dev-qa-db-ja.com

cssを使用してdiv内のulとliをターゲットにする

<ul>と<li>のマークアップをターゲットにする方法を見つけようとしていますが、ページ全体ではなく、特定の<div>内のみです。これはHTMLにあります。

<div id="navbar_div">
   <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Products</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div>

CSSで私は次のようなことをしたいと思います：

div#navbar_div {
    float:right;
}

div#navbar_div .ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

div#navbar_div .li {
    display: inline;
}
htmlcsshtml-lists
5
Dan James Palmer

まず、CSSのulから.記号を削除する必要があります。 . signtを使用してclassを定義し、#記号を使用してidを定義します。しかし、htmlによって提供されるデフォルトの要素またはタグについては、それらを使用したくありません。そこにname.nameを使用することができます。例として、このように書けるボディにスタイルを付けると.

body{
 background-color:black;
}

より良いアイデアを得るために、私はあなたのために小さなコードを書きました。これが役立つことを願っています

<!DOCTYPE html>
<html>
<head>
        <title></title>
</head>

<style type="text/css">
        body{
                margin:0;
                padding: 0;
        }

/* add styles only to for 'ul' element, inside the id="one" div */
div#one ul{
        list-style-type: none;
        color: orange;
}


/* add style only to the 'li' elements inside the id="one" div. this means 'li' inside the 'ul' inside the 'div' which its id="one" */
div#one ul li{
        display: inline;
        margin: 20px;

}

</style>

<body>

 <div id="one">
        <ul>
                <li>one</li>
                <li>two</li>
                <li>three</li>
                <li>four</li>
                <li>five</li>
        </ul>
 </div>

 <div id="two">
        <ul>
                <li>one</li>
                <li>two</li>
                <li>three</li>
                <li>four</li>
                <li>five</li>
        </ul>
 </div>

</body>
</html>
11
Chanaka Caldera

ulおよびliの前のピリオドを削除します。ピリオドはクラスを意味します。 ulとliはネイティブHTMLタグであるため、そのまま参照できます。

2
Eric Guan
.navbar_div ul , .navbar li {
 //whatever goes here
}
2
Matthew Gaim