Question

所以基本上我想要复制的是当你尝试按CTRL +或增加网页大小时Twitter在他们的页面上设置的内容。

目前，我的元素将在放大时取代，我还没有找到解决方案......这是一个长期存在的问题，我还没有解决。

感谢所有帮助..

HTML：

<div class="h_headerbar">
<div class="h_navbar">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Advertising</a></li>
            <li><a href="#">Publishing</a></li>
        </ul>
    </nav>
</div>
</div>

CSS：

body{
background-color:#565656;
max-height:750px;
min-height:545px;
right:0;
left:0;
}
.h_headerbar{
width:100%;
background-color:black;
height:125px;
}
.h_navbar{
    width:100%;
    text-align:center;
    display:table;
    vertical-align:middle;
}
.h_navbar li{
    list-style-type:none;
    display:inline-block;
    width:100px;
    height:35px;
    background-color:black;
    text-align:center;
    border:3px solid #111;
    margin:0px 25px 0px 25px;
    border-radius:5px;
}
.h_navbar li:hover{
background-color:#191919;
}
.h_navbar a{
    text-decoration:none;
    display:table-cell;
    color:white;
    font-size:18px;
    vertical-align:middle;
    width:100px;
    height:35px;
}

JSFiddle

感谢所有帮助...我有一个项目我想开始，但我不想设计整个页面，知道我构建它的方式会导致元素位移...

Answer 1

我知道最近发生了什么。你想要的是你的列表适应你的浏览器在任何屏幕尺寸天气你收缩屏幕甚至扩大它。以及缩放时！

因此，您需要在脚本中添加一些响应式CSS。

@media screen and (max-width: 660px){}

在括号内设置div的尺寸。你的div在大约660px处失去它的位置，所以当你的屏幕达到那个宽度时，你可以控制你的nav和li元素会发生什么。

html css jquery

如何在不移动元素的情况下使网页元素大小增加？

1 个答案: