基于显示器宽度的元素大小

我正在创建我自己的个人网站，作为我迄今在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; 
}

来源

2013-10-22 Justin Chang

您需要让你的'＃头部宽度更大，点击/悬停时登录下拉，或者使元素更小。 –

如果你需要一个CSS唯一的解决办法，你可以用min-width玩：

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

Fiddle

来源

2013-10-22 22:40:45

基于显示器宽度的元素大小

回答

相关问题