1

我正在创建自己的个人网站，以测试我迄今为止在 HTML 和 JavaScript 方面所学的知识。我制作了工具栏，它在我的显示器上看起来不错，它有相当大的宽度。我有工具栏内容在中心。我尝试在较小的显示器上访问它，工具栏中的元素相互重叠，因为我根据百分比设置内容。我知道用像素测量会遇到同样的问题。我将如何创建一个网站，如果监视器宽度大于 x 像素，那么它将使工具栏的内容居中，但如果监视器宽度小于 x 像素，它不会将工具栏的内容居中？

正如您在这个jsFiddle 中看到的那样，元素重叠，但是如果您将视图窗格拖得更宽，您可以看到它居中。

索引.html：

<body>
<div id="header">
    <div id="toolbar">
        <div id="links">
            <ol>
                <li id="home"><a href="justinpchang.zxq.net/index.html">Home</a></li>
                <li id="blog"><a href="justinpchang.zxq.net/blog/index.html">Blog</a></li>
                <li id="forum"><a href="justinpchang.zxq.net/forum/index.html">Forums</a></li>
                <li id="chatbox"><a href="justinpchang.zxq.net/chatbox/index.html">Chatbox</a></li>
                <li id="code"><a href="justinpchang.zxq.net/code/index.html">Code</a></li>
                <li id="calendar"><a href="justinpchang.zxq.net/calendar/index.html">Calendar</a></li>
            </ol>
        </div>
        <div id="login">
            Username: <input type="text" name="firstname"></input>
            Password: <input type="text" name="lastname"></input>
            <a href="justinpchang.zxq.net/user/loginlanding.html"><button id="submit" class="button">Submit</button></a>
        </div>
    </div>
</div>

CSS：

body{
background-color:#EBF2F0;
margin-top:50px;
}
#links{
padding:0px;
margin:0px;
top:-10px;
position:absolute;
vertical-align: center;
}
a:link{
text-decoration:none;
color:#FFFF00;
}
a:visited{
text-decoration:none;
color:#FFFF00;
}
a:hover{
text-decoration:none;
color:#000BF2;
}
a:active{
text-decoration:none;
color:#FFFF00;
}
li{
display:inline;
padding:0px;
font-family:Courier;
}
ol{
list-style-type: none;
}
#header{
width:100%;
padding:5px 10px;
margin:0px;
height:25px;
top:0px;
left:0px;
position:fixed;
background-color:#000000;   
}
#toolbar{
width:70%;
margin-left:15%;
margin-right:15%;
}
#home,#blog,#forum,#chatbox,#code,#calendar{
padding:10px;
color:#000BF2;
}
#home:hover,#blog:hover,#forum:hover,#chatbox:hover,#code:hover,#calendar:hover{
background-color:#2E2E2D;
color:#000BF2;
}
#login{
color:#FFFFFF;
margin-right:30px;
text-align:right;
}
#submit{
margin-top:-7px;
margin-left:10px;
padding:6px;
}
4

1 回答 1

2

如果你需要一个纯 CSS 的解决方案，你可以玩min-width：

#toolbar{
  width:70%;
  margin-left:15%;
  margin-right:15%;
  min-width:1200px;
}

小提琴

于 2013-10-22T22:40:45.980 回答