1

ナビゲーションとして使用できるように、水平アイテムのリストを作成しようとしています。しかし、何らかの理由で、表示をに設定しても機能しinlineません。また、表示を に設定しようとしましたinline-blockが、結果はありませんでした。助言がありますか？

CSS

#page {
    margin-top: 2em;
    background: #00000
}

#pageborder {
    background-color: white;
    margin-left: 150px;
    margin-right: 150px;
}

body, html {
    padding: 0;
    margin: 0;
    background-color: #EEEEEE;
    height: 100%;
    font-family:"Monospace", Lucida Console;
    font-size: 16;
}

h1 {
    font-size: 28pt;
}

h2 {
    margin:0;
    padding-bottom: 7px;
    font-size: 22;
}

p {
    margin-bottom:0px;
    padding-bottom:0px;
}

#header {
    height:50px;
    background-color: none;
    border-color: #E7E7E7;
    font-size: 28pt;
    color: white;
    padding-top: 20px;
    padding-bottom: 5px;
    margin-top: 108px;
}

#content {
    position: left;
    color: #5E5849;
    background-color: white;
    border: 2px solid;
    border-color: #EEEEEE;
    text-align: left;
    padding: 1em 2em 4em;
    margin-left: 20px;
    margin-right: 322px;
}

#sidebar {
    float:right;
    margin-right: 180px;
    position: absolute;
    top:;
    right:0;
    text-align: left;
    width: 250px;
    border: 2px solid;
    border-color: #EEEEEE;
    padding-top: 8px;
    padding-left: 40px;
}

#twitter {
    display: inline;
    float: left;
    margin-bottom: 10px;
    margin-right: 20px;
}

#youtube {
    display: inline;
    float: left;
    margin-bottom: 10px;
    margin-right: 20px;
}

#google {
    display: inline;
    float: left;
    margin-bottom: 10px;
    margin-right: 20px;
    padding-bottom: 2px;
}


#justin {
    display: inline;
    float: left;
    margin-bottom: 10px;
    margin-right: 20px;
}

#Social {
    border-bottom: solid thin grey;
    padding-bottom: 7px;
    font-size: 15px;
    margin-top: 10px;
}

#profilepic {
    margin-bottom: 10px;
}

* {
    margin: 0;
}

.footer {
    margin-left: 100px;
    height: 2em;
    color: white;
    clear: both;
    background-color: black;
}

th {
    text-align: left;
    padding-right: 2em;
}

#nav {
    width:100%;
    height:30px;
    background-color:#999;
}

#nav ul {
    display: inline-block;
    list-style-type: none;
    height:150px;
    color: red;
    padding-left: 150px;
}

#nav ul li {
    display:inline;
}

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="template.css" />
    <title>Template</title>
</head>
<body>
    <div id="page">
        <div id="pageborder">
            <div id="header">
                <img src="banner.png" width=600 height=74.18>
            </div>
            <div id="nav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about">About</a></li>
                    <li><a href="links">Links</a></li>
                </ul>
            </div>
            <div id="sidebar">
                <table>
                    <tr>
                        <div id="Social"><p><b>Social</b></p></div>
                        <p>
                            <div id="youtube">
                                <a href="http://www.youtube.com/ksheehan77" target="_blank">
                                    <img src="youtube_icon.png" width=36 height=36>
                                </a>
                        </div>
                            <div id="twitter">
                                <a href="http://www.twitter.com/#!/ksheehan77" target="_blank">
                                    <img src="Twitter.png" width=32 height=32>
                                </a>
                            </div>
                            <div id="justin">
                                <a href="http://www.justin.tv/ksheehan77" target="_blank">
                                    <img src="justintv.png" width=32 height=32>
                                </a>
                            </div>
                            <div id="google">
                                <a rel="author" href="https://profiles.google.com/110661467085975877308/" target="_blank">
                                    <img src="http://ssl.gstatic.com/images/icons/gplus-32.png" width="32" height="32">
                                </a>
                            </div>
                        </p>
                    </tr>
                </table>
            </div>
            <div id="content"> 
                <h2>Content</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus nunc eget sem iaculis pharetra. Integer sodales interdum accumsan. In et diam neque. Praesent eget erat id lectus rutrum placerat a a purus. Integer molestie arcu vel orci iaculis sagittis consequat mauris hendrerit. Fusce placerat leo ac tortor fringilla posuere. Quisque et enim nisl, eu laoreet nibh. Sed vitae turpis leo. Etiam dictum pretium faucibus. Nam quis ornare nibh. Sed ultricies lacinia dolor ac ullamcorper. Sed dictum enim ut urna consequat quis bibendum mi eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec blandit nisi vitae dui blandit ultrices.</p>

                    <p>Aliquam enim ligula, pharetra at scelerisque eu, imperdiet vel lorem. Phasellus faucibus nunc ac purus imperdiet eleifend. Praesent id scelerisque massa. Suspendisse sed ornare lectus. Duis eget lacus quam, quis pharetra magna. Phasellus rhoncus, lectus et dictum accumsan, diam justo volutpat urna, ac auctor leo velit in augue. Proin eget nisi vel turpis hendrerit tempor sed a odio. Phasellus lacinia placerat lobortis. Vestibulum consequat bibendum semper. Vivamus cursus eros non felis gravida fermentum. Donec pulvinar, nisl a varius volutpat, ante lectus varius erat, ac sodales nisl nulla sed eros. Nam bibendum cursus bibendum. Nam id orci vitae odio consequat vestibulum eu vitae ipsum. Fusce ullamcorper pretium est, eget elementum mauris tristique vitae.</p>

                    <p>Suspendisse facilisis mauris eget mi tempus porta. Morbi viverra, libero sed posuere porta, est purus commodo nunc, ac interdum lacus eros et turpis. Pellentesque consequat sagittis elit vel imperdiet. Pellentesque elementum, eros eget vestibulum tempor, justo metus volutpat purus, sed viverra justo odio et erat. Maecenas id urna quam. Praesent auctor congue venenatis. Aenean dolor nisl, viverra vitae ornare sed, pretium sed nibh. Pellentesque pharetra pellentesque ipsum, in ornare lacus iaculis vel. Aliquam quis arcu lectus, eu pretium est. Integer a urna dui, vel tincidunt magna.</p>

                    <p>Nulla mauris felis, mollis at egestas at, suscipit at sem. Donec tincidunt, tellus at consectetur consectetur, elit nisi ullamcorper dolor, vel posuere odio sapien quis ligula. Proin nunc arcu, commodo id hendrerit pulvinar, hendrerit a ligula. Nulla sagittis iaculis est, eleifend mollis dolor ullamcorper a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc non urna non nulla mollis rhoncus. Mauris eu urna tortor, et tincidunt diam.</p>

                    <p>Ut vehicula sodales nisi eu viverra. Donec nec sollicitudin nisi. Quisque tristique massa vel felis gravida iaculis. Proin a urna quis lacus facilisis viverra. In lacus nunc, faucibus sed luctus sit amet, tempor vitae nunc. Sed erat urna, ultricies non pretium at, vehicula id nibh. Sed sed dolor nisl. Duis nisi felis, euismod sit amet pulvinar ac, hendrerit vel tellus. Fusce vehicula tristique pellentesque. Cras molestie laoreet viverra.</p>
                </div>
            </div>
        </div>
    </div>
    <center>
        <div class="footer">Kieran Sheehan - 2012</div>
    </center>
</body>
</html>
4

4 に答える 4

1

以下を使用して動作します:

<html>
  <head>
    <style type="text/css">
      #nav{
        width:100%;
        height:30px;
        background-color:#999;
      }

      #nav ul{
        height:150px;
        color: red;
        padding-left: 150px;
      }

      #nav ul li{
        display:inline;
        list-style-type: none;}
    </style>
   </head>

   <div id="nav">
   <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about">About</a></li>
      <li><a href="links">Links</a></li>
   </ul>
  </div>
</html>

Ctrl+F5 を使用してブラウザーを更新してみてください。機能しない結果がキャッシュされている可能性があります。

于 2012-04-30T21:22:03.133 に答える
0 
#nav ul{
display: inline-block;
list-style-type: none;
height:150px;
color: red;
***padding-left: 150px;***}

ここであなたは間違いを犯したと思います。ulのパディングを削除します。うまくいくかもしれません

于 2012-05-02T14:30:37.217 に答える
0

CSS にはそのようなプロパティは含まれていませんが、li 要素がクリアされていないことを確認してください (つまり、clear:left / clear:right / clear:both)。

再確認するには、これを css に追加します (!important を使用するのは良くありません。テスト用にのみ使用してください)。

#nav ul li{
    clear: none !important;
}

フローティングも追加して、要素を同じ行に表示できるかどうかを確認してください。それでも問題が解決しない場合は、貼り付けたコードからは明らかではないセットアップに問題があることは間違いありません。

于 2012-04-30T23:42:08.053 に答える
0

私にとってはうまくいきます。これらと競合する可能性のある他の CSS ルールはありますか? おそらく、chrome 開発者コンソールを使用して、「li」に適用されているスタイルを確認できます。

ちなみに、「list-style-type」は「li」ではなく、「ul」や「ol」と一緒に使うものです。

于 2012-04-30T21:16:19.527 に答える