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

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

html css

Html 基于监视器宽度的元素大小,html,css,width,Html,Css,Width,我正在创建自己的个人网站，作为对我迄今为止在HTML和JavaScript方面所学内容的测试。我制作了工具栏，它在我的显示器上看起来很漂亮，它的宽度相当大。我把工具栏的内容放在中间。我试着在一个较小的监视器上访问它，工具栏中的元素相互重叠，因为我根据百分比设置了内容。我知道用像素测量也会遇到同样的问题。我如何创建一个网站，如果显示器宽度大于x像素，它将使工具栏的内容居中，但如果显示器宽度小于x像素，它将不会使工具栏的内容居中正如您在JSFIDLE中看到的，元素重叠，但是如果您将视图窗格拖得更宽

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

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

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专用解决方案，您可以使用

minwidth

：

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

您需要将

#标题的宽度变大，在单击/悬停时使用登录下拉菜单，或者将元素变小。
#toolbar{
  width:70%;
  margin-left:15%;
  margin-right:15%;
  min-width:1200px;
}