基于监视器宽度的元素大小 [英] Element Size Based on Monitor Width
问题描述
我创建了自己的个人网站，作为我迄今为止在HTML和JavaScript中学到的内容。我做了工具栏，它看起来不错在我的显示器，它有相当大的宽度。我有工具栏内容在中心。我试图在一个较小的监视器上访问它，并且工具栏中的元素相互重叠，因为我根据百分比设置内容。我知道用像素测量会出现同样的问题。我如何创建一个网站，如果监视器宽度大于x像素，那么它将中心工具栏的内容，但如果监视器宽度小于x像素，它将不会集中工具栏的内容？
I am creating my own personal website as a test for what I have learned so far in HTML and JavaScript. I made the toolbar, and it looks nice on my monitor, which has quite a large width. I have the toolbar contents to be in the center. I tried accessing it on a smaller monitor, and the elements in the toolbar overlapped each other because I set the contents based on percentages. I know that measuring with pixels will come up with the same problem. How would I create a website where if the monitor width is larger than x pixels, then it will center the contents of the toolbar, but if the monitor width is smaller than x pixels, it will not center the contents of the toolbar?
正如您在这篇文章中看到的，元素重叠，但如果您拖动视图窗格更宽，您可以看到它居中。
As you can see in this jsFiddle, the elements overlap, but if you drag the view pane wider, you can see that it centers.
index.html：
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;
}
推荐答案
解决方案你可以使用 min-width ：
#toolbar{
width:70%;
margin-left:15%;
margin-right:15%;
min-width:1200px;
}
这篇关于基于监视器宽度的元素大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
