Question

我有一个导航标签，它只占我需要的宽度的一半，我需要它占据100％的宽度，但它没有。我看过这个网站，谷歌无法让它像我想要的那样工作。导航即黑色背景应占据宽度的100％，但不是。任何想法。

＆＃13;

nav ul ul {
	display: none;
}

nav ul li:hover > ul {
	display: block;
}
nav ul {
	background: #1e1d1d; 
	background: linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #1e1d1d 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;  
	list-style: none;
	position: relative;
	display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}
nav ul li {
	float: left;
}
	nav ul li:hover {
		background: #f7f7f7;
		background: linear-gradient(top, #f7f7f7 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #f7f7f7 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #f7f7f7 0%,#5f6975 40%);
	}
		nav ul li:hover a {
			color: #ff0000;
		}
	
	nav ul li a {
		display: block; padding: 25px 40px;
		color: #f7f7f7; text-decoration: none;
	}
nav ul ul {
	background: #f7f7f7; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
}
	nav ul ul li {
		float: none; 
		position: relative;
	}
		nav ul ul li a {
			padding: 15px 40px;
		}	
			nav ul ul li a:hover {
				background: #888484;
        color: #ff0000;
			}
nav ul ul ul {
	position: absolute; left: 100%; top:0;
}

＆＃13;

<nav>
	<ul>
		<li><a href="#">Basin &amp; Sinks</a></li>
		<li><a href="#">Showers</a>
			<ul>
				<li><a href="#">Shower Trays</a></li>
				<li><a href="#">Shower Glass</a>
					<ul>
						<li><a href="#">Frosted</a></li>
						<li><a href="#">Clear</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Bathroom Accessories</a>
			<ul>
				<li><a href="#">Plugs</a></li>
				<li><a href="#">Toilet Paper</a></li>
			</ul>
		</li>
		<li><a href="#">Toilets</a></li>
	</ul>
	</nav>

＆＃13;

https://jsfiddle.net/1nzot5rq/1/

尝试了几个链接并试过宽度：100％，最大宽度：100％;但是我没有运气。

Answer 1

只需将width: 100%; box-sizing: border-box;添加到nav ul，就像这样：https://jsfiddle.net/d8ch5qer/

＆＃13;

nav ul ul {
  display: none;
}

nav ul li:hover > ul {
  display: block;
}

nav ul {
  background: #1e1d1d;
  background: linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);
  background: -moz-linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);
  background: -webkit-linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
  padding: 0 20px;
  border-radius: 10px;
  list-style: none;
  position: relative;
  display: inline-table;
  width: 100%;
  box-sizing: border-box;
}

nav ul:after {
  content: "";
  clear: both;
  display: block;
}

nav ul li {
  float: left;
}

nav ul li:hover {
  background: #f7f7f7;
  background: linear-gradient(top, #f7f7f7 0%, #5f6975 40%);
  background: -moz-linear-gradient(top, #f7f7f7 0%, #5f6975 40%);
  background: -webkit-linear-gradient(top, #f7f7f7 0%, #5f6975 40%);
}

nav ul li:hover a {
  color: #ff0000;
}

nav ul li a {
  display: block;
  padding: 25px 40px;
  color: #f7f7f7;
  text-decoration: none;
}

nav ul ul {
  background: #f7f7f7;
  border-radius: 0px;
  padding: 0;
  position: absolute;
  top: 100%;
}

nav ul ul li {
  float: none;
  position: relative;
}

nav ul ul li a {
  padding: 15px 40px;
}

nav ul ul li a:hover {
  background: #888484;
  color: #ff0000;
}

nav ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}

＆＃13;

<nav>
  <ul>
    <li><a href="#">Basin &amp; Sinks</a></li>
    <li><a href="#">Showers</a>
      <ul>
        <li><a href="#">Shower Trays</a></li>
        <li><a href="#">Shower Glass</a>
          <ul>
            <li><a href="#">Frosted</a></li>
            <li><a href="#">Clear</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Bathroom Accessories</a>
      <ul>
        <li><a href="#">Plugs</a></li>
        <li><a href="#">Toilet Paper</a></li>
      </ul>
    </li>
    <li><a href="#">Toilets</a></li>
  </ul>
</nav>

＆＃13;

Answer 2

添加：

  nav ul {
   width: 100%;
   display:block;
  }

但即便如此，管理列以适应所有宽度也会遇到问题。您可以使用JS计算每个宽度，或者为导航使用 display：table ，为 ul li使用 display：table-cell

Answer 3

如果您正在使用Chrome浏览器，Chrome会在<ul>中添加40px的填充内容：

-webkit-padding-start: 40px;

这使<ul>扩展到您定义的宽度。

有两种方法可以克服这个问题：

<强> 1。删除所有填充，包括浏览器默认值

https://jsfiddle.net/pzod450b/1/

只需添加-webkit-padding-start: 0即可。最重要的是，你还在<ul>的任一侧添加了20px的填充，删除了这个

CSS：

nav ul {
    background: #1e1d1d; 
    background: linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #1e1d1d 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;
  width: 100%;
}

<强> 2。使用box-sizing: border-box

使用此方法将确保浏览器计算应用于其最终宽度内元素的所有填充/边框：

https://jsfiddle.net/u1vzag3b/

nav ul {
    background: #1e1d1d; 
    background: linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #1e1d1d 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;
  width: 100%;
  box-sizing: border-box;
}

您会注意到，在这两种情况下，都应将width: 100%添加到nav ul。

CSS没有填满整个宽度

3 个答案: