Question

我正在开发一个网页。我制作了一个水平菜单，其中包含徽标，水平线和菜单。他们并排坐在一起但是当我调整窗口大小时，一切都只是重叠并浮动。在Windows调整大小时，我希望菜单按下水平线（换句话说，动态地减小它的宽度），这样它就不会重叠。

#menuline {
    width:67%;
    height:1px;
    background-color: #434343;
    margin-top: auto;
    margin-bottom: auto;
    top:0; left:0; right:0; bottom:0;
    position: absolute;
    margin-left:167px;
    display:table-cell;
}

Answer 1

为包装元素设置一个min-width像素，以便菜单不会在该尺寸以下折叠。

Answer 2

你可能会这样看：

header{
	z-index: 1;
	width:100%; 
	height:105px; 
	background:rgba(255,255,255,0.95);
	padding:10px 35px;
	position: absolute;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

nav {
	float: right;
}
nav ul {
	vertical-align:middle;
	list-style:none;
	height:83px;
	display:table-cell;
}

nav li{
	float:left;
	padding-left: 0px;
}

nav li2{
	float:left;
	padding-left: 25px;
}

nav a{
	font-family: 'Open Sans', sans-serif;
	font-size:20px;
	color: #000;
	text-decoration: none;
}
.logo{
	width:120px;
	float: left;
}

nav a:hover,
nav a:visited {
	color: #000;
}

nav a:hover {
	text-decoration: underline;
}

#menuline{
	position:absolute;
	height:1px;
	background-color: #434343;
	margin-top: auto;
	margin-bottom: auto;
	left: 160px;
	right: 35px;
	top: 65px;
	position: absolute;
	display:table-cell;
}

<header>
 <div class="logo">
 <svg>
<rect x="60.32" y="5.482" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="1.75" stroke-miterlimit="10" width="51.761" height="76.185"/>
<path fill="none" stroke="#000000" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
  M34.941,43.571c0.896-0.814,2.066-1.783,3.003-2.636c3.698-3.359,6.071-7.455,6.697-12.551c0.598-4.863,0.211-9.478-2.349-13.766
  c-2.803-4.69-7.136-7.164-12.276-8.433C28.06,5.7,26.05,5.482,24.024,5.488c-5.042,0.007-10.087,0-15.13,0.003
  c-0.5,0-1.014-0.07-1.566,0.177c0,25.208,0,50.462,0,75.714c0.425,0.361,0.938,0.271,1.43,0.271c5.273,0,10.543,0.011,15.814-0.003
  c4.567-0.012,9.084-0.541,13.206-2.616c5.735-2.883,9.459-7.505,10.607-13.872c0.927-5.14,0.197-10.07-2.963-14.436
  c-2.257-3.123-5.319-5.121-8.845-6.566c-2.646-1.085-5.391-1.503-8.193-1.746c-6.942-0.604-13.903-0.113-20.854-0.272"/>
<polygon fill-rule="evenodd" clip-rule="evenodd" points="86.202,46.367 83.403,43.579 86.202,40.781 88.998,43.579 "/>
</svg>
</div>
<div id="menuline"></div>
<nav>
  <ul>
    <li><a href="#">THE LOOK</a></li>
    <li2>&diams;</li2>
    <li2><a href="#">SHOP</a></li2>
  </ul>
</nav>    
</header>

水平导航中的重叠Div

2 个答案: