html中页面整体排版,html在不同尺寸浏览器窗口中页面排版混乱

浏览器放至最大显示没有问题，但是改变浏览器窗口大小，出现混乱

截图如下，出现堆叠：

希望达到的效果如下：

代码：

html

test

首页

问题

专栏

用户

特色

在线客服

css .row { background-color: rgba(51, 51, 51, 1); height: 60px; width: inherit; box-shadow: 0 5px black inset; } #a1 { position: absolute; height: 64px; width: 172px; margin-left: 60px; margin-top: 3px; } #a2 { color: white; font-size: 28px; font-weight: bold; margin-top: 15px; margin-left: 240px; position: absolute; } #a3,#a4,#a5,#a6,#a7,#a8 { position: absolute; color: white; margin-top: 15px; font-size: 18px; float: none; } #a3 { color: #FFCC00; margin-left: 55%; } #a4 { margin-left: 61%; } #a5 { margin-left: 65%; } #a6 { margin-left: 71%; } #a7 { margin-left: 79%; } #a8 { margin-left: 85%; } #a_1,#a_2,#a_3,#a_4,#a_5,#a_6 { position: absolute; color: white; margin-top: 15px; } #a_1 { margin-left: 60%; } #a_2 { margin-left: 64%; } #a_3 { margin-left: 70%; } #a_4 { margin-left: 78%; }

`

麻烦大家帮我看看怎么实现？谢谢