html布局问题

Posted 2023-05-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html布局问题相关的知识，希望对你有一定的参考价值。

代码如下：html页面：<code><form action="9in8.php" method="post"> <div> <label>权限组名称</label> <input style="width:400px" type="text" name="title" id="inputString" autocomplete="off" onkeyup="lookup(this.value);" onblur="fill();"/> </div> <div class="suggestionsBox" id="suggestions"> <div class="suggestionList" id="autoSuggestionsList"> <li onClick="fill(\''所以'\');">所以我想知道这里到底能装多少字</li> </div> </div> <button type="submit" class="btn btn-primary" data-toggle="modal">提交 </button></form></code>css：<code> .suggestionsBox position: relative; left: 272px; margin-top: -2px; .suggestionList width:290px; margin: 0px; padding: 0px; .suggestionList li width:280px; margin: 0px; padding: 0px; cursor: pointer; list-style-type: none; text-align: right; .suggestionList li:hover background-color: #659CD8; </code>效果图：
让标签里面的字靠左对齐，去掉那片空白。

<code><form action="9in8.php" method="post"> <div><label>权限组名称</label> <input style="width:400px" type="text" name="title" id="inputString" autocomplete="off" onkeyup="lookup(this.value);" onblur="fill();"/> </div> <div class="suggestionsBox" id="suggestions"> <div class="suggestionList" id="autoSuggestionsList"> <li onClick="fill(\\\'\'所以\'\\\');">所以我想知道这里到底能装多少字</li> </div> </div> <button type="submit" class="btn btn-primary" data-toggle="modal">提交 </button></form></code>css：<code> .suggestionsBox position: relative; left: 272px; margin-top: -2px; .suggestionList width:290px; margin: 0px; padding: 0px; .suggestionList li width:280px; margin: 0px; padding: 0px; cursor: pointer; list-style-type: none;text-align: left; .suggestionList li:hover background-color: #659CD8; </code>

把text-align:right;改成text-align:left;

参考技术A 把padding-left的值去掉。
百度的推荐答案就是直接看谁字多吗？
还text-align:left。。。。
我的天！现在的text-align都可以自动折行了。。。厉害！

HTML页面布局问题

1、把页面分为header、container、footer上中下三部分，header和footer固定在浏览器的上面和下面，header和footer的高度以像素为单位。
2、container部分，分为sidebarmenu、mainContent左右两部分，sidebarmenu的宽度以像素为单位。
3、当中间部分内容过多时，mainContent出现滚动条。（注：滚动条是出现在mainContent里，而不是container，滚动条移动时，sidebarmenu里的内容是不动的）
4、如果可能，html代码在IE、Firefox、Chrome浏览器里都能正常显示。

如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div+CSS布局</title>
<style>
body font-family:Verdana; font-size:14px; margin:0;
#container margin:0 auto; width:900px;
#header height:100px; background:#6cf; margin-bottom:5px;
#mainContent height:500px; margin-bottom:5px;
#sidebar float:left; width:200px; height:500px; background:#9ff;
#content float:right; width:695px; height:500px; background:#cff;/*因为是固定宽度，采用左右浮动方法可有效避免ie 3像素bug*/
#footer height:60px; background:#6cf;
</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="mainContent">
<div id="sidebar">sidebar</div>
<div id="content"></div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>追问

1、mainContent、sidebar、content 的高度不能用px定死，需要根据浏览器的大小、电脑的分辨率自适应。
2、footer始终固定在浏览器的最底部。
3、关于滚动条，不是出现在整个浏览器的右边，而是出现在content的右边（浅蓝色的右边）。

参考技术A 简单用框架或者 overflow:auto 前者是固定好框架宽度相当于4个不同页面后者是在样式里面定义不能超过特定的宽度或高度否则就会有滚动条追问

方便的话，请直接给出页面代码吧。我尝试了很多，但还是有问题

追答

先看看别人的不行的话晚上再说现在有点忙

参考技术B <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div+CSS布局</title>
<style>
body font-family:Verdana; font-size:14px; margin:0;

#nav
background-color: #85d989;
width: 100%;
height: 50px;

#mid
background-color: #cc85d9;
width: 100%;
position: absolute;
top: 50px; bottom: 50px;
left: 0px;

#menu background-color:#ffff99;height:100%;width:30%;float:left;
#content background-color:#EEEEEE;height:100%;width:70%;float:left;overflow: auto;

#footer
background-color: #aa85d9;
width: 100%;
height: 50px;

position: absolute;
bottom: 0px;
left: 0px;

</style>
</head>
<body>

<div id="main">
<div id="nav">nav</div>
<div id="mid">
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>

<div id="content">
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
</div>
</div>
<div id="footer">footer</div>

</div>
</body>
</html> 参考技术C css :
.mainContent
overflow-y:scroll ;
height:500px;
追问

mainContent的高不能用px，height:100%;

参考技术D 怎么有点像试题？追问

不是试题，是我自己在做，但是滚动条那里的显示老是出问题。

追答

mainContent css里增加 overflow:scroll 属性不就行了吗;

追问

不行，我需要用的是overflow:auto，但在IE里面滚动条不显示。

追答

你确定mainContent里内容有很多吗

追问

有的页面多，有的页面少，但内容多的时候，滚动条必须按上面的要求出现。

追答