1

cssでページのスタイルを設定しようとしています。私はdivを使用してページを作成し、外部のcssドキュメントを介してそれらのスタイルを設定しています。これは私がこれまでに持っているものです: ここに画像の説明を入力してください

明らかに、これは私が望んでいることではありません!何らかの理由で、メニュー(ulを介してビルド)がメニューdivに残りません。また、私のフッターでも同じ問題が発生しています。私は何が間違っているのですか?

これが私のaspxページとcssドキュメントの両方です:ASPX:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="home.aspx.cs" Inherits="AppointmentsDrivingLicense_C_and_D.home" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>A.C.T. | Appointments 1.0.0</title>
    <link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>
<body>
<div id="content">
    <!-- BEGIN HEADER -->
    <div>
        <div id="logo">
            <div id="programName">
                <p><b>ACT</b>Appointments 1.0.0</p>
            </div>
            <div id="logged">
                <p>User | <a href="#">Afmelden</a></p>
            </div>
        </div>
        <div id="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
    <!-- END HEADER -->

    <!-- BEGIN BODY -->
    <div id="body">
        <b>Home</b>
        <hr />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt, elit eu sollicitudin consectetur, nulla velit congue massa, 
            sit amet hendrerit elit massa vel nisl. Sed consequat aliquam risus ac imperdiet. Etiam placerat metus vitae augue accumsan a pretium lacus varius. 
            In facilisis risus vitae enim varius at lobortis eros fermentum. Nunc sit amet enim id ligula scelerisque tincidunt vitae sit amet nisl. 
            Fusce tellus augue, interdum non semper vitae, semper sed lectus. Nam ultricies massa non erat suscipit a vulputate est bibendum. 
            Nullam cursus ante et ipsum accumsan lacinia. Mauris eget diam sed enim dapibus rutrum ut vel mauris. In faucibus convallis ultrices. 
            Donec pharetra tellus at sem euismod eget consectetur arcu luctus.
        </p>
        <p>
            Morbi scelerisque cursus mi ac suscipit. Curabitur quis nisi ante. In arcu diam, mattis a tristique sit amet, adipiscing sed nulla. 
            Nunc felis massa, ullamcorper eget tristique quis, vestibulum eu tellus. In hac habitasse platea dictumst. Pellentesque nec lacus nibh, 
            a egestas neque. Sed sed mi viverra orci luctus fringilla. Praesent dictum elementum felis, vitae gravida dolor vehicula at. 
            Vestibulum nec molestie tortor. Quisque vel arcu dolor. Nulla facilisi.
        </p>
    </div>
    <!-- END BODY -->

    <!-- BEGIN FOOTER -->
    <div id="footer">
        <div id="footer-left">
            <p>Welkom user</p>
        </div>
        <div id="footer-right">
            <p>ACT-KM © 2013</p>
        </div>
    </div>
    <!-- END FOOTER -->
</div>
</body>
</html>

CSSドキュメント:

    *{
    margin: 0px;
    padding: 0px;
}
body {
    background-color: lightgray;
}
#content{
    margin-left: 45px;
    margin-right: 45px;
    border-left: solid 1px black;
    border-right: solid 1px black;
}
#footer{
    background-color: #E8E8D9;
    font-size: 12px;
    padding-bottom: 5px;
    padding-top: 5px;
    border: solid 1px black;
    /*border-top: solid 1px black;*/
}
#footer-left{
    float: left;
    padding-left: 10px;
}
#footer-right{
    float: right;
    padding-right: 10px;
}
#body{
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    background-color: white;
}
#logo{
    /*background-color: #E8E8D9;*/
    background-color: red;
}
#programName p{
    float: left;
    padding-left: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 20px;
}
#logged{
    float: right;
    font-size: 12px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
}
#menu{
    clear:both;
    border-top: solid 1px black;
    border-bottom: solid 1px black;
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
}
#menu ul{
    list-style-type: none;
}
#menu li{
    float: left;
}
#menu li a{
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
}

前もって感謝します!ケビン

4

3 に答える 3

1

すべてのli要素をフロートさせるので、親が崩壊するのを防ぐためにフローティングをクリアする必要があります。ul要素のフロートをクリアすることで問題を解決できると思います。

#menu ul{
    clear: both;
    list-style-type: none;
}
于 2013-01-24T11:46:01.243 に答える
0

から削除float:left#footer-left#menu li

に追加disply:inline-block#menu liて、水平方向に配置します。

#menu li{
   display:inline-block
}

デモ

于 2013-01-24T12:06:46.023 に答える
0
try this
<style>
*{
  margin: 0px;
  padding: 0px;
 }

ul li {list-style-type:none;}

body {
     background-color: lightgray;
     }

#content{
        margin-left: 45px;
        margin-right: 45px;
        border-left: solid 1px black;
        border-right: solid 1px black;
        }

#footer{
       background-color: #E8E8D9;
      font-size: 12px;
      padding-bottom: 5px;
      padding-top: 5px;
     border: solid 1px black;
   /*border-top: solid 1px black;*/
overflow:hidden;
    }

#footer-left{
         float: left;
         padding-left: 10px;
         }

 #footer-right{
         float: right;
        padding-right: 10px;
             }
#body{
     padding-left: 20px;
     padding-right: 20px;
     padding-bottom: 10px;
     padding-top: 10px;
     background-color: white;
     }

#logo{
    /*background-color: #E8E8D9;*/
    background-color: red;
overflow:hidden;
    }

#programName p{
         float: left;
        padding-left: 20px;
       padding-bottom: 10px;
       padding-top: 10px;
      font-size: 20px;
       }

#logged{
     float: right;
    font-size: 12px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    }

#menu{
   clear:both;
   border-top: solid 1px black;
   border-bottom: solid 1px black;
  padding-left: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
overflow:hidden;
   }

#menu ul{
      list-style-type: none;
       }

#menu li{
   float: left;
        }

#menu li a{
      display: block;
     padding-left: 15px;
    padding-right: 15px;
   text-decoration: none;
  font-family: Georgia, 'Times New Roman', serif;
   font-size: 16px;
  }
</style>
于 2013-01-24T12:27:14.380 に答える