全宽

全宽

关注
发信
关注(28)粉丝(399)

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我还是有点陌生​​。看来我的帖子大部分是代码。我需要更多详细信息吗？

最佳答案

使用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>

10-07 21:52
Powered by LMLPHP ©2024 全宽 0.042169