＆＃34;利＆＃34;导航栏中重叠的项目
导航栏出现此问题：正如您从以下两张图片中看到的那样，问题是当我调整浏览器窗口大小（第二张图片）时，导航栏的项目会重叠，也不会减小它们的大小。为了继续适应屏幕。我希望他们在减小尺寸的同时保持同一条线。
我已经尝试设置以％表示的字体大小，但似乎它不是解决方案......你可以帮助我吗？非常感谢你
我正在谈论的菜单就是这个：
<nav class="secondnav nascosta ">
<ul class="listsecondnav primissimo">
<li class="left dropdown prime">
<a href="#home" class="edition drop-btn">U.S. EDITION
<span class="fa fa-chevron-down" aria-hidden="true"> </span> </a>
<div class="dropdown-content dropmod">
<a href="#">Apps</a>
<a href="#">Gear</a>
<a href="#">Tech</a>
<a href="#">Creative</a>
<a href="#">Contributors</a>
<a href="#">Insights</a>
<a href="#">Launch</a>
<a href="#">World</a>
<a href="#">Distract</a>
<a href="#">Offers</a>
</div>
</li>
<li class="left prime"><a href="#home" class="">Wed, Aug 30, 2017</a></li>
<li class="right prime"><a href="#news" class="subscribe ">SUBSCRIBE</a></li>
<li class="right prime"><a href="#contact" class="">SIGN IN</a></li>
</ul>
</nav>
HTML：
<!-- Non usare ROW perche' e' una classe definita nel bootstrap stilizzata...ti cambia margini padding ecc.occhio ai nomi delle classi che usi, se sono nel bootstrap potrebbero non darti il risultato che ti aspetti xke gia stilizzati -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>newsweek</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="./regole.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<nav class="secondnav nascosta ">
<ul class="listsecondnav primissimo">
<li class="left dropdown prime">
<a href="#home" class="edition drop-btn">U.S. EDITION
<span class="fa fa-chevron-down" aria-hidden="true"> </span> </a>
<div class="dropdown-content dropmod">
<a href="#">Apps</a>
<a href="#">Gear</a>
<a href="#">Tech</a>
<a href="#">Creative</a>
<a href="#">Contributors</a>
<a href="#">Insights</a>
<a href="#">Launch</a>
<a href="#">World</a>
<a href="#">Distract</a>
<a href="#">Offers</a>
</div>
</li>
<li class="left prime"><a href="#home" class="">Wed, Aug 30, 2017</a></li>
<li class="right prime"><a href="#news" class="subscribe ">SUBSCRIBE</a></li>
<li class="right prime"><a href="#contact" class="">SIGN IN</a></li>
</ul>
</nav>
<nav class="firstnav">
<ul class="listfirstnav">
<li class="left dropdown">
<a href="#home" class="edition drop-btn sparisci">U.S. EDITION
<span class="fa fa-chevron-down" aria-hidden="true"> </span> </a>
<div class="dropdown-content">
<a href="#">Apps</a>
<a href="#">Gear</a>
<a href="#">Tech</a>
<a href="#">Creative</a>
<a href="#">Contributors</a>
<a href="#">Insights</a>
<a href="#">Launch</a>
<a href="#">World</a>
<a href="#">Distract</a>
<a href="#">Offers</a>
</div>
</li>
<li class="left"><a href="#home" class="sparisci">Wed, Aug 30, 2017</a></li>
<li class="right"><a href="#news" class="subscribe sparisci">SUBSCRIBE</a></li>
<li class="right"><a href="#contact" class="sparisci">SIGN IN</a></li>
</ul>
</nav>
<div class="title">
<h1>Newsweek</h1>
</div>
<nav class="secondnav">
<ul class="listsecondnav classic">
<li class="center"><a href="#home">U.S.</a></li>
<li class="center"><a href="#home">World</a></li>
<li class="center"><a href="#news">Business</a></li>
<li class="center"><a href="#contact">Tech & Science</a></li>
<li class="center"><a href="#contact">Culture</a></li>
<li class="center"><a href="#contact">Sport</a></li>
</ul>
</nav>
</header>
<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
<img src="a.jpg" alt="" class="imgtop">
</div>
<div class="col-lg-4 col-md-0 col-sm-4 col-xs-4">
<ul class="verticalbar ">
<li><a class="aside aaa" href="#home">LATEST HEADLINES</a></li>
<li><a class="aside" href="#home">After Trump’s Snub, Sean Spicer Finally Meets the Pope</a></li>
<li><a class="aside" href="#news">Arsenal Could See Nightmare Exodus on Deadline Day</a></li>
<li><a class="aside" href="#contact">Liverpool Prepares to Hijack £40 Million Chelsea Deal</a></li>
<li><a class="aside" href="#about">How Did Princess Diana Die?</a></li>
<li><a class="aside" href="#about">Newsweek Hosts Second AI and Data Science Event in NYC</a></li>
<li><a class="aside" href="#about">Rival NBA Teams Are Looking to Hijack Cavs-Celtics Deal</a></li>
<li><a class="aside" href="#about">New York Attorney General Helps With Russia Probe</a></li>
</ul>
</div>
<div class="articles">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 bella">
<h1 class="trump"> WHY TRUMP MAY STILL WANT AN ECONOMIC WAR WITH BEIJING </h1>
<h3>In the White House, the battle over China is only just beginning </h3>
<hr></hr>
<h2>China Calls U.S. ‘Arrogant’ After Ship Collision </h2>
</div>
<div class="articleone col-lg-4 col-md-4 col-sm-6 col-xs-12 bella">
<img src="0908palestinians01.jpg" class="subheaderimg">
<h2>The Permanent Occupation?</h2>
LFifty years after Israel seized control of the West Bank, the Palestinians may have finally lost their bid for independence.
</div>
<div class="articletwo col-lg-4 col-md-4 col-sm-6 col-xs-12 bella">
<img src="b61-model-11-drop.jpg" class="subheaderimg">
<h2>What is EQUIS and why is their accreditation so important to a business school?</h2>
With an estimated number of 15,000 business schools worldwide, only a handful (170 institutions from 41 countries) hold the EQUIS quality label. Find out more...
</div>
</div>
<div class="col-lg-4 col-md-0 col-sm-6 col-xs-4">
<ul class="verticalbar nascosta modifica ">
<li><a class="aside aaa" href="#home">LATEST HEADLINES</a></li>
<li><a class="aside" href="#home">After Trump’s Snub, Sean Spicer Finally Meets the Pope</a></li>
<li><a class="aside" href="#news">Arsenal Could See Nightmare Exodus on Deadline Day</a></li>
<li><a class="aside" href="#contact">Liverpool Prepares to Hijack £40 Million Chelsea Deal</a></li>
<li><a class="aside" href="#about">How Did Princess Diana Die?</a></li>
<li><a class="aside" href="#about">Newsweek Hosts Second AI and Data Science Event in NYC</a></li>
<li><a class="aside" href="#about">Rival NBA Teams Are Looking to Hijack Cavs-Celtics Deal</a></li>
<li><a class="aside" href="#about">New York Attorney General Helps With Russia Probe</a></li>
</ul>
</div>
<div class="articlesdos">
<div class="one col-lg-4 col-md-4 col-sm-6 col-xs-12 bella">
<img src="hurricane-harvey.jpg" class="subheaderimg">
<h2>The Permanent Occupation?</h2>
LFifty years after Israel seized control of the West Bank, the Palestinians may have finally lost their bid for independence.
</div>
<div class="two col-lg-4 col-md-4 col-sm-6 col-xs-12 bella">
<img src="princess-diana.jpg" class="subheaderimg">
<h2>What is EQUIS and why is their accreditation so important to a business school?</h2>
With an estimated number of 15,000 business schools worldwide, only a handful (170 institutions from 41 countries) hold the EQUIS quality label. Find out more...
</div>
<div class="three col-lg-4 col-md-4 col-sm-6 col-xs-12 bella">
<img src="rts1a5vt.jpg" class="subheaderimg">
<h2>What is EQUIS and why is their accreditation so important to a business school?</h2>
With an estimated number of 15,000 business schools worldwide, only a handful (170 institutions from 41 countries) hold the EQUIS quality label. Find out more...
</div>
</div>
<!-- <div class="subheader">
<h1> WHY TRUMP MAY STILL WANT AN ECONOMIC WAR WITH BEIJING </h1>
<h3>In the White House, the battle over China is only just beginning </h3>
<hr></hr>
<h2>China Calls U.S. ‘Arrogant’ After Ship Collision </h2>
<div class="primaimg">
<img src="0908palestinians01.jpg" class="subheaderimg uno">
<div class="didascalia1">
<h2 class="clear"> The Permanent Occupation? </h2>
<h3> Fifty years after Israel seized control of the West Bank, the Palestinians may have finally lost their bid for independence. </h3>
</div>
</div>
<img src="0908palestinians02.jpg" class="subheaderimg due">
</div> -->
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS：
html,body {
height: 100%; margin: 0px; padding: 0px; }
#navbar {
margin-bottom:0; }
.alert {
border-radius: 0; }
.container {
width:100%;
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto; }
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
height:100%;
min-height: 1px;
padding-right: 0;
padding-left: 0; }
.row {
margin-right: 0;
margin-left: 0; }
.footer {
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
border-top: none; }
.panel {
border:none; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-color: #f4f5f6;;
}
.container {
background-color:white;
margin:0 auto;
max-width: 1300px;/*max width + i margini automatici li usi per fare il resize automatico al diminuire la width del broswer*/
margin-right: auto;
margin-left: auto;
} @media screen and (max-width: 1088px) {
.container {
width:100%;}}
.header{
width: 100%;
border-right: 0px;
}
.listfirstnav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: red;
border: 1px solid rgba(0, 0, 0, 0.3);
border-right: 0px;
border-left: 0px;
height: 120px;
z-index: 999;
} @media screen and (max-width: 1088px) {
.listfirstnav {
position: static;
top:200px;}}
li.left{
position: relative;
float: left;
top:40px;
font-weight: bold;
font-size: 18px;
} @media screen and (max-width: 1088px) {
li.left {
top:0px;}}
li.right{
position: relative;
float: right;
top:40px;
font-weight: bold;
font-size: 18px;
}@media screen and (max-width: 1088px) {
li.right {
top:0px;
bottom:300px;}}
.title {
position: absolute;
width: 600px; /* Need a specific value to work */
text-align: center;
margin: 0 auto;
top:10px;
left: 0;
right: 0;
color: white;
font-size: 90px;
font-weight: bold;
display: inline-block;
}@media screen and (max-width: 1088px) {
.title {
top:60px;
}}
.firstnav li a {
display: block;
padding: 12px 16px;
color:white;
text-decoration: none;
}
.firstnav li a.subscribe{
color:red;
background-color: white;
margin-right: 10px;
}
.firstnav li a.edition {
display: inline-block;
padding-left: 0;
margin-left: 10px;
padding-right: 13px;
padding-left: 10px;
}
.listsecondnav {
list-style-type: none;
padding: 0;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.3);
border-right: 0px;
border-left: 0px;
height: 70px;
} @media screen and (max-width: 840px) {
.classic {
display: none;
}}
li.center {
display: inline-block;
border: 1px solid transparent;
border-right-color: black;
position: relative;
top: 25%;
}
li.center:last-child {
border-right-color: transparent;
}
.secondnav li a {
padding: 0 15px;
color:black;
font-size: 24px;
text-decoration: none;
}
a:link, a:visited {
display:block;
font-weight:bold;
color:#FFFFFF;
text-align:center;
text-decoration:none;
text-transform:uppercase;
vertical-align: middle;
}
/*aside navigation bar*/
.verticalbar {
list-style-type: none;
margin: 20px 10px;
padding: 0;
float:left;
height: 540px;
max-width: 80%;
} @media screen and (max-width: 1088px) {
.verticalbar {
display: none;}}
.verticalbar li a {
display: block;
color: #000;
padding: 8px 0;
text-decoration: none;
text-align: left;
}
/* Change the link color on hover */
.verticalbar li a:hover {
background-color: #555;
color: white;
}
a.aside:link, a.aside:visited {
text-transform:none;
}
.verticalbar li a.aaa {
color: grey;
}
.verticalbar li {
border-top: 1px solid #d9d9d9;
font-size: 20px;
padding: 4px;
padding-right: 7px;
margin-right: 20px;
}
.verticalbar li:first-child {
border-top: none;
}
/*imag*/
.imgtop {
width: 100%;
float: left;
padding:20px;
}
/*subheader*/
.trump{
font-size: 30px;
font-weight: bold;
}
h2{
font-weight: bold;
}
.articles {
width: 100%;
float: left;
}
.bella {
padding:20px;
}
.articleone {
clear: left;
}
.articletwo {
}
.subheaderimg{
width: 100%;
}
/*secondlinearticles*/
.articlesdos {
width: 100%;
float: left;
}
/*menu a tendina a comparasa*/
.dropdown:hover .dropdown-content {
display: block; }
.drop-btn:hover {
color: red;
background-color: white;}
.dropdown-content {
display: none;
position: absolute;
top: 32px;
left: 10px;
background-color: #fff;
overflow: visible;
z-index: 999;
}
.dropdown .dropdown-content a { /*ricordati sempre della specificita'. a parte l'ordine dentro del file CSS conta tanto la specificita'. comunque con l'"inspect" capisci subito quali sono le regole piu specifiche e che quindi sovrascrivono le altre*/
display: block;
color: rgba(0, 0, 0, 0.55)
;
font-family: "Ropa Sans", sans-serif;
text-transform: uppercase;
text-align: left;
padding: 5px;
padding-left: 10px;
font-weight: bold;
font-size: 18px;
overflow:visible;
}
.dropdown-content a:hover {
color: #333; }
/*fine menu tendina*/
.nascosta{
display: none; }
@media screen and (max-width: 1088px) {
.nascosta {
display: inline;}}
.firstnav li a.sparisci{
display: inline-block; }
@media screen and (max-width: 1088px) {
.firstnav li a.sparisci {
display: none;}}
.modifica {
max-width: 100%;
}
.modifica li {
padding: 0px;
padding-right: 7px;
margin-right: 20px;
}
.primissimo {
height: 40px;
background-color: black;
text-align: center;
}
.primissimo li a {
color: white;
}
li.prime {
display: inline-block;
position: relative;
top:20%;
}
.dropmod {
left:0;
top:27px;
width: 100%;
}
2 个答案:
答案 0 :(得分：2)
我不确定这是不是你想要的，但你可以在CSS中使用：
@media screen and (max-device-width: 000px){
div-element{
font-size: 00px;
}
并为不同的屏幕尺寸设置不同的字体大小。我想你已经在CSS中使用了@ media-screen，所以也许你可以改变它们里面的字体大小
答案 1 :(得分：1)
要防止导航栏中的<li>项重叠，您可以使用CSS单位vw - 等于视口初始包含块的宽度的1％。：
font-size: 2vw; // make font size as 2% of the viewport width
这样，当窗口宽度改变时，字体大小将自动改变。
以下是一个示例，请点击＆＃34;运行代码段＆＃34;，然后点击＆＃34;整页＆＃34;并调整浏览器窗口大小以查看效果。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body {
margin: 0;
padding: 0;
}
ul {
background: pink;
padding: 0;
margin: 0;
height: 1.5em;
}
ul li {
display: inline-block;
list-style: none;
font-size: 1.8vw;
margin-right: 1em;
}<ul class="header">
<li>Hello</li>
<li>World</li>
<li>Congratulations</li>
<li>Generation</li>
<li>Carpliforliate</li>
</ul>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？