1
我有導航欄的這個問題：從以下兩個圖像中可以看到問題是，當我調整瀏覽器窗口（第二圖像）的大小時，導航欄的項目重疊並且也不減小它們的尺寸以便繼續適合屏幕。我希望他們留在同一行，同時減少他們的大小。「li」項目在導航欄中重疊
我已經嘗試設置以％表示的元素的字體大小，但它似乎不是解決方案......你能幫助我嗎？非常感謝你
我談論的菜單是這個：
<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%;
}
你想，讓他們 「在同一行」。在我看來，這根本不適合。我看看是否有一種方法可以讓黑條更高，或者將項目放在摺疊菜單中。 Mediaqueries是你的朋友;） – JasperZelf
請仔細閱讀如何創建[mcve]，然後再提供一個...而不是僅僅在這裏傾銷你的_whole code_。 – CBroe