blocks|key|5305675|text|试试这把小提琴-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5305676|小提琴：http://jsfiddle.net/8LFLd/|offset|length|5305677|演示：http://jsfiddle.net/8LFLd/embedded/result/|5305678|注意:我已经在<a>标签上添加了悬停，所以它看起来更好。|style|CODE|5305679|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/8LFLd/|1|http://jsfiddle.net/8LFLd/embedded/result/^0|0|4|Q|0|0|3|16|1|0|7|3|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@$D|11|E|12|1|13]]|A|$]]|$1|H|3|I|5|6|7|14|8|@$D|15|E|16|J|K]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]|T|$5|O|P|Q|A|$R|U]]]]

Try this fiddle - 

Fiddle: <a href="http://jsfiddle.net/8LFLd/" rel="nofollow">http://jsfiddle.net/8LFLd/</a>

Demo: <a href="http://jsfiddle.net/8LFLd/embedded/result/" rel="nofollow">http://jsfiddle.net/8LFLd/embedded/result/</a>

Note: I have added hover on <code>&lt;a&gt;</code> tag so it look better.

blocks|key|1266303|text|问题出在#menubutton+li+a上的'float:+left‘，去掉它，div将100%25地显示在屏幕上。浮动会让父div+menuspaces认为其中实际上没有包含任何内容(+div实际上是100%25，但没有高度)。你也可以把浮动留在那里，然后简单地添加一些内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1266304|<div+id="menuspace">
<ul+id="menubutton">
<li><a+href="http://www.example.net/">Home</a></li>
</ul>Look+the+div+goes+to+100%25+now</div>|code-block|syntax|javascript|1266305|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The problem is the 'float: left' on the #menubutton li a. Remove that and the div will go 100% of the screen. The float makes the parent div menuspaces think that there's really no content contained in it (the div is actually going 100% but has no height). You could also leave the float in there and simply add some content:

<pre><code>&lt;div id="menuspace"&gt;
&lt;ul id="menubutton"&gt;
&lt;li&gt;&lt;a href="http://www.example.net/"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;Look the div goes to 100% now&lt;/div&gt;
</code></pre>

blocks|key|1266310|text|您的#menubutton+li+a中有一个浮点数，所以您必须清除它的父对象，即#menubutton。所以，像这样写：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1266311|#menubutton{
+overflow:hidden;
}|code-block|syntax|javascript|1266312|entityMap^0|2|G|14|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

There is a float in your <code>#menubutton li a</code> so you have to clear is his parent which is <code>#menubutton</code>. So, write like this:

<pre><code>#menubutton{
 overflow:hidden;
}
</code></pre>

blocks|key|5305630|text|将您的css+for+menuspace更改为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5305631|#menuspace{+
++++background:+#2175bc;padding:0;margin:0;overflow:auto;
}|code-block|syntax|javascript|5305632|出现这个问题的原因是因为li标记上的float:left。overflow:auto+on+parent元素将清除浮动(或者您可以在ul后面添加一个空的div，并将style设置为clear:both+on+it)。|5305633|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Change your css for menuspace to this:

<pre><code>#menuspace{ 
 background: #2175bc;padding:0;margin:0;overflow:auto;
}
</code></pre>

The reason why you are having this issue is because of the float:left on the li tag. overflow:auto on parent element will clear floats (or you can add an empty div right after ul and set style to clear:both on it).

blocks|key|5305644|text|至少有两种方法可以解决这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5305645|5305646|Float+#menuspace也是如此。在应用了float:+none;+clear:+both的ul之后(fiddle)|ordered-list-item|offset|length|style|CODE|5305647|Add一个空的div。(fiddle)|5305648|5305649|可能有更多的方法来完成你想要的东西(正如上面其他人所建议的那样)。|5305650|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/U5JFE/|1|http://jsfiddle.net/U5JFE/1/^0|0|0|6|A|P|O|1E|2|1J|6|0|0|C|6|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|10|8|@$F|11|G|12|H|I]|$F|13|G|14|H|I]|$F|15|G|16|H|I]]|9|@$F|17|G|18|1|19]]|A|$]]|$1|J|3|K|5|E|7|1A|8|@]|9|@$F|1B|G|1C|1|1D]]|A|$]]|$1|L|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1F|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

There are at least two ways to fix this.

<ol>
<li>Float <code>#menuspace</code> as well. (<a href="http://jsfiddle.net/U5JFE/" rel="nofollow">fiddle</a>)</li>
<li>Add an empty div after the <code>ul</code> with <code>float: none; clear: both</code> applied. (<a href="http://jsfiddle.net/U5JFE/1/" rel="nofollow">fiddle</a>)</li>
</ol>

There are probably more ways to accomplish what you're after (as suggested above by others).

blocks|key|1881700|text|看看这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1881701|http://jsfiddle.net/U5JFE/2/|offset|length|1881702|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

see this

<a href="http://jsfiddle.net/U5JFE/2/" rel="nofollow">http://jsfiddle.net/U5JFE/2/</a>

blocks|key|1266458|text|嗨，你不需要给出宽度，所有它都会自动获取深度细节的宽度，检查一下我的例子很简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1266459|http://jsfiddle.net/U5JFE/7/|offset|length|1266460|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

Hi you don't need to give width and all it will take automatically the width for deep details check it my example its simple :

<a href="http://jsfiddle.net/U5JFE/7/" rel="nofollow">http://jsfiddle.net/U5JFE/7/</a>

I was browsing the other related threads but i couldnt find a fix..
The Div does not fill 100% of the screen with the chosen background color, only the width of the <code>&lt;li&gt;</code>
CSS:

<pre><code>#menuspace{
 background: #2175bc;padding:0;margin:0;width:100%;
}
#menubutton {
margin:0;
 padding: 0;
 width:100%;
}

#menubutton li {
 display: inline;
}

#menubutton li a {
 font-family: Arial;
 font-size:11px;
 text-decoration: none;
 float:left;
 padding: 10px;
 background: #2175bc;
 color: #fff;
}
</code></pre>

HTML:

<pre><code>&lt;div id="menuspace"&gt;
&lt;ul id="menubutton"&gt;
&lt;li&gt;&lt;a href="http://www.example.net/"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/div&gt;
</code></pre>

Width 100% does not fill the screen

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我浏览了其他相关的帖子，但我找不到修复的方法。Div不会用所选的背景色填充屏幕的100%，只有<li> CSS的宽度：#menuspace{ background: #2175bc;padding:0;margin:0;width:100%;}#menubutton {margin:0; padding: 0; width:100%;}#menubutton li { di

问宽度100%不会填满屏幕
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问宽度100%不会填满屏幕EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问宽度100%不会填满屏幕
EN