bugfix> html > 投稿

だから私はそれを全幅にしたいと思います! 重いコードではありませんが、私はhtmlとcssに少し慣れています。

/*Set the parent <li>’s CSS position property to ‘relative’.*/
ul {
	list-style: none;
	padding: 0;
	margin: 0;
	background: #1bc2a2;
}
ul li {
	display: block;
	position: relative;
	float: left;
	background: #1bc2a2;
}
/*The CSS to hide the sub menus.*/
li ul {
	display:none;
}
ul li a {
	display: block;
	padding: 1em;
	text-decoration: none;
	white-space: nowrap;
	color: #fff;
}
ul li a:hover {
	background: #2c3e50;
}
/*Displays the dropdown menu on hover.*/
li:hover > ul {
	display: block;
	position: absolute;
}
li:hover li {
	float: none;
}
li:hover a {
	background: #1bc2a2;
}
li:hover li a:hover {
	background: #2c3e50;
}
.main.navigation li ul li {
	border-top: 0;
}
/*Displays second level dropdown menus to the right of the first level dropdown menu.
*/
ul ul ul {
	left: 100%;
	top: 0;
}

<!DOCTYPE html>
<html lang="hu-hu">
	<head>
		<meta charset="UTF-8">
		<title>cigand.menu.nested.list</title>
		<link rel="stylesheet"
			  type="text/css"
		        href="cigand.hu.menu.1.css" />
			  
	</head>
	<body>
		<div id="main-navigation">
		<ul>
			<li><a>Városunk</a>
				<ul>
					<li><a>Köszöntő</a></li>
					<li><a>Földrajz</a></li>
					<li><a>Története</a></li>
					<li><a>Heraldika</a></li>
				</ul>
			</li>
			<li><a>Önkormányzat</a>
				<ul>
					<li><a>Polgármesteri Hivatal</a>
						<ul>
							<li><a>Polgármester</a></li>
							<li><a>Alpolgármester</a></li>
							<li><a>Jegyző</a></li>
							<li><a>Titkárság</a></li>
							<li><a>Hatósági és Igazgatási Osztály</a></li>
							<li><a>Építésügyi és Városfejlesztési Osztály</a></li>
							<li><a>Pénzügyi Osztály</a></li>
							<li><a>Letölthető dokumentumok</a></li>
							<li><a>Pályázatok</a>
								<ul>
									<li><a>EU</a></li>
									<li><a>ÁROP</a></li>
									<li><a>TIOP-1.2.3</a></li>
									<li><a>KEOP-6.1.0/A/11.</a></li>
									<li><a>KEOP-6.2.0/A/11-2011-0121</a></li>
									<li><a>KEOP-6.2.0/A/11-2011-0124</a></li>
									<li><a>KEOP-4.2.0/A/11-2011-0626</a></li>
									<li><a>EOP-5.5.0/K/14-2014-0031</a></li>
									<li><a>ÁROP-1.A.3-2014-2014-0116</a></li>
									<li><a>KEOP-5.7.0/15-2015-0275</a></li>
									<li><a>KÖFOP-1.2.1-VEKOP-16-2016-00280</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a>Képviselő-testület</a>
						<ul>
							<li><a>Képviselők</a></li>
							<li><a>Határozatok, Rendeletek</a></li>
							<li><a>Rendelet-tervezetek</a></li>
							<li><a>estületi ülések</a></li>
						</ul>
					</li>
					<li><a>RNÖ</a></li>
					<li><a>Telefonszámok</a></li>
				</ul>
			</li>
			<li><a>Oktatás és Kultúra</a>
				<ul>
					<li><a>Oktatás</a>
						<ul>
							<li><a>Cigánd</a>
								<ul>
									<li><a>Óvoda</a></li>
									<li><a>Iskola</a></li>
								</ul>
							</li>
							<li><a>Révleányvár</a></li>
							<li><a>Zemplénagárd</a></li>
						</ul>
					</li>
					<li><a>Kultúra</a>
						<ul>
							<li><a>Művelődési Ház</a></li>
							<li><a>Városi Könyvtár</a></li>
							<li><a>Múzeumporta</a></li>
						</ul>
					</li>
					<li><a>Iskolakonyha</a></li>
				</ul>
			</li>
			<li><a>Egészségügy</a>
				<ul>
					<li><a>Háziorvosok</a></li>
					<li><a>Fogorvos</a></li>
					<li><a>Központi Orvosi Ügyelet</a></li>
					<li><a>Védőnői Szolgálat</a></li>
					<li><a>Járóbeteg Szakrendelő</a></li>
				</ul>
			</li>
			<li><a>Hagyományok</a>
				<ul>
					<li><a>Múzeumporta</a></li>
					<li><a>Tájház</a></li>
					<li><a>Óvodamúzeum</a></li>
				</ul>
			</li>
			<li><a>Sport</a>
				<ul>
					<li><a>Intézmények</a>
						<ul>
							<li><a>Szabadidő Központ</a></li>
							<li><a>Műfüves-pálya</a></li>
							<li><a>Labdarúgó-pálya</a></li>
						</ul>
					</li>
					<li><a>Cigánd SE</a></li>
				</ul>
			</li>
			<li><a>Kezdőlap</a>
			</li>
		</ul>
    </div>
	</body>
</html>
/*So I would like to make it full width!*/

だから私はそれを全幅にしたいと思います! 重いコードではありませんが、私はhtmlとcssに少し慣れています。私の投稿はほとんどがコードです。詳細に必要なものは何ですか??

回答 3 件
  • flex を使用する  エンドツーエンドにするCSSプロパティ。

    /*Set the parent <li>’s CSS position property to ‘relative’.*/
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      background: #1bc2a2;
      width: 100%;
      display: inline-flex;
    }
    ul li {
      flex: auto;
      position: relative;
      float: left;
      background: #1bc2a2;
    }
    
    /*The CSS to hide the sub menus.*/
    li ul {
      display: none;
    }
    ul li a {
      display: block;
      padding: 1em;
      text-decoration: none;
      white-space: nowrap;
      color: #fff;
    }
    ul li a:hover {
      background: #2c3e50;
    }
    
    /*Displays the dropdown menu on hover.*/
    li:hover>ul {
      display: block;
      position: absolute;
    }
    li:hover li {
      float: none;
    }
    li:hover a {
      background: #1bc2a2;
    }
    li:hover li a:hover {
      background: #2c3e50;
    }
    .main.navigation li ul li {
      border-top: 0;
    }
    
    /*Displays second level dropdown menus to the right of the first level dropdown menu.
    */
    ul ul ul {
      left: 100%;
      top: 0;
    }
    
    
    <!DOCTYPE html>
    <html lang="hu-hu">
    <head>
      <meta charset="UTF-8">
      <title>cigand.menu.nested.list</title>
      <link rel="stylesheet" type="text/css" href="cigand.hu.menu.1.css" />
    </head>
    <body>
      <div id="main-navigation">
        <ul>
          <li><a>Városunk</a>
            <ul>
              <li><a>Köszöntő</a></li>
              <li><a>Földrajz</a></li>
              <li><a>Története</a></li>
              <li><a>Heraldika</a></li>
            </ul>
          </li>
          <li><a>Önkormányzat</a>
            <ul>
              <li><a>Polgármesteri Hivatal</a>
                <ul>
                  <li><a>Polgármester</a></li>
                  <li><a>Alpolgármester</a></li>
                  <li><a>Jegyző</a></li>
                  <li><a>Titkárság</a></li>
                  <li><a>Hatósági és Igazgatási Osztály</a></li>
                  <li><a>Építésügyi és Városfejlesztési Osztály</a></li>
                  <li><a>Pénzügyi Osztály</a></li>
                  <li><a>Letölthető dokumentumok</a></li>
                  <li><a>Pályázatok</a>
                    <ul>
                      <li><a>EU</a></li>
                      <li><a>ÁROP</a></li>
                      <li><a>TIOP-1.2.3</a></li>
                      <li><a>KEOP-6.1.0/A/11.</a></li>
                      <li><a>KEOP-6.2.0/A/11-2011-0121</a></li>
                      <li><a>KEOP-6.2.0/A/11-2011-0124</a></li>
                      <li><a>KEOP-4.2.0/A/11-2011-0626</a></li>
                      <li><a>EOP-5.5.0/K/14-2014-0031</a></li>
                      <li><a>ÁROP-1.A.3-2014-2014-0116</a></li>
                      <li><a>KEOP-5.7.0/15-2015-0275</a></li>
                      <li><a>KÖFOP-1.2.1-VEKOP-16-2016-00280</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li><a>Képviselő-testület</a>
                <ul>
                  <li><a>Képviselők</a></li>
                  <li><a>Határozatok, Rendeletek</a></li>
                  <li><a>Rendelet-tervezetek</a></li>
                  <li><a>estületi ülések</a></li>
                </ul>
              </li>
              <li><a>RNÖ</a></li>
              <li><a>Telefonszámok</a></li>
            </ul>
          </li>
          <li><a>Oktatás és Kultúra</a>
            <ul>
              <li><a>Oktatás</a>
                <ul>
                  <li><a>Cigánd</a>
                    <ul>
                      <li><a>Óvoda</a></li>
                      <li><a>Iskola</a></li>
                    </ul>
                  </li>
                  <li><a>Révleányvár</a></li>
                  <li><a>Zemplénagárd</a></li>
                </ul>
              </li>
              <li><a>Kultúra</a>
                <ul>
                  <li><a>Művelődési Ház</a></li>
                  <li><a>Városi Könyvtár</a></li>
                  <li><a>Múzeumporta</a></li>
                </ul>
              </li>
              <li><a>Iskolakonyha</a></li>
            </ul>
          </li>
          <li><a>Egészségügy</a>
            <ul>
              <li><a>Háziorvosok</a></li>
              <li><a>Fogorvos</a></li>
              <li><a>Központi Orvosi Ügyelet</a></li>
              <li><a>Védőnői Szolgálat</a></li>
              <li><a>Járóbeteg Szakrendelő</a></li>
            </ul>
          </li>
          <li><a>Hagyományok</a>
            <ul>
              <li><a>Múzeumporta</a></li>
              <li><a>Tájház</a></li>
              <li><a>Óvodamúzeum</a></li>
            </ul>
          </li>
          <li><a>Sport</a>
            <ul>
              <li><a>Intézmények</a>
                <ul>
                  <li><a>Szabadidő Központ</a></li>
                  <li><a>Műfüves-pálya</a></li>
                  <li><a>Labdarúgó-pálya</a></li>
                </ul>
              </li>
              <li><a>Cigánd SE</a></li>
            </ul>
          </li>
          <li><a>Kezdőlap</a>
          </li>
        </ul>
      </div>
    </body>
    </html>
    
    

  • 次の CSS を追加するだけです  フローティングリストアイテムをクリアフィックスします。

    #main-navigation{
      width: 100%;
    }
    #main-navigation ul:before,
    #main-navigation ul:after{
     content: '';
     display:table;
     clear: both;
    }
    
    

    このフィドルをチェックすることもできます:https://jsfiddle.net/8przfade/

  • ULのCSSで使用します。     オーバーフロー:非表示。

あなたの答え