1
ナビゲーションバーにこの問題があります。次の2つの画像からわかるように、ブラウザウィンドウのサイズを変更すると（2番目の画像）、ナビゲーションバーの項目重なり合って、また、スクリーンにフィットし続けるために、それらのサイズを減少させない。私は彼らのサイズを縮小しながら同じ行に留まることを望みます。"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コードをダンプするのではなく、こちらを提供してください。 – CBroe