Question

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

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

的index.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;
}

Answer 1

如果您需要仅限CSS的解决方案，则可以使用min-width：

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

Fiddle

基于监视器宽度的元素大小

1 个答案: