Html 如何双向剪切div以保持对象居中？我试图建造一个保持在顶部、固定和中间的导航条。但是，如果屏幕尺寸足够大，根据我的需要，我们可以左右使用一些未使用的空间，中间也有一点空间。_Html_Css

Html 如何双向剪切div以保持对象居中？我试图建造一个保持在顶部、固定和中间的导航条。但是，如果屏幕尺寸足够大，根据我的需要，我们可以左右使用一些未使用的空间，中间也有一点空间。

html css

Html 如何双向剪切div以保持对象居中？我试图建造一个保持在顶部、固定和中间的导航条。但是，如果屏幕尺寸足够大，根据我的需要，我们可以左右使用一些未使用的空间，中间也有一点空间。,html,css,Html,Css,现在，如果有人调整浏览器窗口的大小，我需要开始从屏幕上去掉未使用的空间，只保留父div的基本div 参考一下Facebook的桌面导航栏如何使用html和css实现这一点此外，如果有人调整了如此之多的大小，以至于对象无论如何都会受到影响，我希望他们能够在不改变位置的情况下从屏幕上剪掉 <html> <head> <style> .navbar { position:fixed; background: #000; height: 30px; width:

现在，如果有人调整浏览器窗口的大小，我需要开始从屏幕上去掉未使用的空间，只保留父div的基本div

参考一下Facebook的桌面导航栏

如何使用html和css实现这一点

此外，如果有人调整了如此之多的大小，以至于对象无论如何都会受到影响，我希望他们能够在不改变位置的情况下从屏幕上剪掉

<html>
<head> <style>
.navbar {
position:fixed;
background: #000;
height: 30px;
width: 100%}
.logo_div{
margin-left:7%;
float:left;
width:32px;
display:inline-block;
height:32px;
}
.search_div {
width: 450px;
display: inline-block;
margin-left:15px;
float:left;
}
#search_box {
width:100%;
border-radius:5px;
border:1px solid #819597;
padding:4px;
border-bottom-right-radius:0px;
border-top-right-radius:0px;
border-right:none;
height:24px;
font-family: Arial;
font-size:16px;
font-weight:lighter;
outline:none;
}
#search_box:focus {
border-right:none;
background-color:#FCFCDA;
}
li {
text-decoration:none;
padding:5px;
padding-bottom:0px;
margin:1px;
margin-top:0px;
list-style:none;
display:inline-block;
}
.menu {

padding:3px;
float:left;
display:inline-block;
padding-left:10px;

}
ul {
margin-top:0px;}
#static_head{
width:1024px;
margin:0 auto;
position:absolute;
text-align:center;
}
.user_controller {
display:inline;
margin:0 auto;
height:100%;
width:auto;
}
</style>
</head>

<body>

<div class="container">
<div class="navbar" id="dHeaderfixed">
<div id="static_head">
<div id="logo_div" ></div>
<div class="search_div">
<form action="search.php" method="get" id="search_form" name="livesearch">
<input type="text" id="search_box" name="query"></form>
</div>
<div class="menu">
a list of things 
</div>
<div id="ui_user_control">some stuff</div></div>
</div></div></div>


navbar先生{
位置：固定；
背景：#000；
高度：30px；
宽度：100%}
.logo_div{
左缘：7%；
浮动：左；
宽度：32px；
显示：内联块；
高度：32px；
}
.search_div{
宽度：450px；
显示：内联块；
左边距：15px；
浮动：左；
}
#搜索框{
宽度：100%；
边界半径：5px；
边框：1px实心#819597；
填充：4px；
边框右下半径：0px；
边框右上角半径：0px；
边界权：无；
高度：24px；
字体系列：Arial；
字体大小：16px；
字体重量：较轻；
大纲：无；
}
#搜索框：焦点{
边界权：无；
背景色：#fcda；
}
李{
文字装饰：无；
填充物：5px；
垫底：0px；
保证金：1px；
边际上限：0px；
列表样式：无；
显示：内联块；
}
.菜单{
填充：3倍；
浮动：左；
显示：内联块；
左侧填充：10px；
}
保险商实验室{
页边距顶部：0px；}
#静压头{
宽度：1024px；
保证金：0自动；
位置：绝对位置；
文本对齐：居中；
}
.用户控制器{
显示：内联；
保证金：0自动；
身高：100%；
宽度：自动；
}
清单
一些东西

现在，空白未使用的空间应该在徽标DIV左侧的导航栏中，这将是根据屏幕大小所需的长度。同样，在搜索框和菜单div之间还有未使用的空间，在菜单div右边的另一个未使用的空间，因此当用户调整浏览器窗口的大小时，所有这些元素都停留在中间，如果进一步调整大小，屏幕只会切断它们而不是改变它们的位置。谢谢

CSS

HTML


你的菜单在这里

CSS

HTML


你的菜单在这里

到目前为止，您是否有一个我们可以使用的示例，一把小提琴或一段代码就好了？抱歉，代码太混乱了。我猜得太多了。代码甚至不起作用。添加了一些代码。请检查。你有没有一个我们可以使用的例子，一把小提琴或一段代码就好了？抱歉，代码太混乱了。我猜得太多了。代码甚至不起作用。添加了一些代码。请签出。请查看我的代码，并帮助我调整搜索框和菜单分区之间未使用的空间，我希望它也能调整大小。请查看我的代码，并帮助我调整搜索框和菜单分区之间未使用的空间，我希望它也能调整大小。

nav {
  position: fixed;
  left: 0;
  top: 0;
  background: red;
  height: 48px;
  min-width: 320px;
  width: 100%;
}

.content {
  max-width: 960px;
  margin: 0 auto;
  color: white;
  background: blue;
  height: 100%;
}

<nav>
<div class='content'>
YOUR MENU HERE  
</div>
</nav>