Question

我正在尝试将移动设备导航栏的内容集中在一起。

它应该有3个div，最左边的div应该是3个菜单扩展栏（汉堡包），中间div应该包含徽标，而最右边的div应该包含3个输入。

问题是它是基于最右边div的左边缘水平居中。 [= LOGO输入输入输入]但看起来像这样 [= LOGO输入输入输入]如果我取出除2输入以外的所有输入 [= LOGO [输入]它完美地工作但是有3个输入它没有。

我已经尝试了所有人都可以给我一个线索，为什么这不会起作用？感谢

＆＃13;

@media screen and (max-width: 1023px) and (min-width: 300px) {
  #hidden-nav {
    justify-content: space-between;
    height: 8vh;
    background-color: rgb(101, 0, 0);
    display: flex;
    padding: 8px;
    min-width: 80px;
    position: fixed;
    width: 100%;
    z-index: 10002;
  }
}
#hidden-nav input {
  max-width: 15vw;
}
body {
}
#hidden-nav:first-child {
  /*	padding-left: 2em; 
  border: 20px solid blue;*/
}
.bar {
  width: 25px;
  height: 2px;
  background-color: white;
  margin: 6px 0;
}
#container-for-right-hidden-nav {
  border: 2px solid blue;
  display: flex;
}

＆＃13;

<div id="hidden-nav" style="border-bottom: 1px solid white; align-items:">
    <div class="" onclick="toggleSidebar()">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
    <div style=""> <img height="35" width="50" src="https://seohackercdn-seohacker.netdna-ssl.com/wp-content/uploads/2011/07/Link-Searching.jpg?x68951" alt="logo" /> </div>
    <img height="35" width="50" src="https://seohackercdn-seohacker.netdna-ssl.com/wp-content/uploads/2011/07/Link-Searching.jpg?x68951" alt="logo" /> 
</div>
<div id="container-for-right-hidden-nav"> 
	<a href="/">
    	<input type="button" style="background-color: dodgerBlue;" value="floorplans">
    </a> 
    <a href="/">
    	<input type="button" style="background-color: green;" value="apply">
    </a> 
    <a href="/">
    	<input type="button" style="background-color: #003059;" value="contact">
    </a> 
</div>

＆＃13;

Answer 1

尝试验证内容中心和对齐项目中心。希望它有所帮助。

#hidden-nav {
display: flex;
justify-content: center;
align-items:center;
height: 8vh;
background-color: rgb(101, 0, 0);

padding: 8px;
min-width: 80px;
position: fixed;
width: 100%;
z-index: 10002; }
}

flexbox css居中和布局不能水平工作

1 个答案: