HTML中内容怎么才不会随着窗口大小发现变形
最近开始学HTML。我用li标签做了一个横向的链接，但是我一缩小窗口，那li的排版也会发现变形。我想要的效果就是无论窗口怎么变化，内容依旧是横向的排版。我右上角的搜索框是用的定位，所以没有随着窗口变形！附上图片！PS：第一张图是大窗口下的效果 ；第二张图是小窗口下的效果；第三张图是目前进度的全部代码；第四张图是发生变形部分的代码！
尽量简单的去实现，能不用定位尽量不用，用class别用id 给ul一个宽度 和高度 li也给宽和高 然后左浮动 （注：ul的宽不能小于li宽度的总和 不然li会掉下来）
<body>
<style>
*,a,li,ul{ margin:0; padding:0; list-style:none; text-decoration:none; font-weight:normal; font-family:Arial, Helvetica, sans-serif}
.tll{ width:1200px; overflow:hidden; margin:0 auto; background-color:#d3d3d3;}
.tll li{ width:171px; height:40px; line-height:40px; text-align:center; float:left; color:black; font-size:20px; }
/*伪类：鼠标移动到li上改变字体颜色*/
.tll li:hover{ color:red}
.tll_div{width:1200px; height:80px; margin:0 auto; line-height:80px; font-size:36px; font-style:oblique;}
.tll_div span{ color:red;}
</style>
<div class="tll_div"><span>W3</span>school</div>
<ul class="tll">
<a href="#"><li>1111</li></a>
<a href="#"><li>2222</li></a>
<a href="#"><li>3333</li></a>
<a href="#"><li>4444</li></a>
<a href="#"><li>5555</li></a>
<a href="#"><li>6666</li></a>
<a href="#"><li>7777</li></a>
</ul>
</body>
<body>
<style>
*,a,li,ul{ margin:0; padding:0; list-style:none; text-decoration:none; font-weight:normal; font-family:Arial, Helvetica, sans-serif}
.tll{ width:1200px; overflow:hidden; margin:0 auto; background-color:#d3d3d3;}
.tll li{ width:171px; height:40px; line-height:40px; text-align:center; float:left; color:black; font-size:20px; }
/*伪类：鼠标移动到li上改变字体颜色*/
.tll li:hover{ color:red}
.tll_div{width:1200px; height:80px; margin:0 auto; line-height:80px; font-size:36px; font-style:oblique;}
.tll_div span{ color:red;}
</style>
<div class="tll_div"><span>W3</span>school</div>
<ul class="tll">
<a href="#"><li>1111</li></a>
<a href="#"><li>2222</li></a>
<a href="#"><li>3333</li></a>
<a href="#"><li>4444</li></a>
<a href="#"><li>5555</li></a>
<a href="#"><li>6666</li></a>
<a href="#"><li>7777</li></a>
</ul>
</body>
温馨提示：内容为网友见解，仅供参考
无其他回答
相似回答
