我有 2 个大问题，如果您能回答我将不胜感激谢谢(我对编程很陌生):1)我不知道如何更改我的文本以使其适合每个屏幕(iphone ipad 笔记本电脑...) 2) 我怎样才能将元素英语、法语...向右移动(我的语言)，使其保持在同一水平线上。 谢谢
.code {
overflow: auto;
}
.logo {
float: left;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70px;
position: fixed;
background-color: white;
opacity: 0.8;
padding-bottom: 10px;
padding-top: 0px;
margin-top: 0px;
}
.navigation-bar {
height: 70px;
width: 111%;
}
#navigation-container img {
float: left;
height: 111%;
}
#navigation-container ul {
padding: auto;
margin: auto;
text-align: center;
display: block;
}
#navigation-container li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
}
#navigation-container li a {
color: black;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
#menu {
float: center;
}
a:hover {
background-color: #0099cc;
}
hr {
color: darkgray;
}<!DOCTYPE html>
<html>
<head>
<title>Welcome </title>
<link rel="stylesheet" href="text.css" type="text/css">
<meta charset="UTF-8">
</head>
<body>
<div class="navigation-bar">
<div id="navigation-container">
<img src="Bildschirmfoto%202017-10-08%20um%2012.01.55.png">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Who are we ?</a></li>
<li><a href="#">Newest</a></li>
<li><a href="#">The Best</a></li>
<li><a href="#">English</a></li>
<li><a href="#">Deutsch</a></li>
<li><a href="#">Français</a></li>
</ul>
<hr >
</div>
</div>
</body>
</html>最佳答案
只要您希望在移动设备上使用桌面导航布局，您只需进行最少的更改即可完成这项工作。
https://codepen.io/will0220/pen/YrabEm
您需要将导航栏和导航栏包装更改为 100% 宽度 - 如果您不希望它超过特定大小，可以添加最大宽度。从那里，为较小的设备添加一个媒体查询，该设备以较小的尺寸开始(在我的示例中为 1000 像素，但它可以更小)并切换到导航元素的字体大小/填充的视口(viewport)单位。这仅适用于您希望在移动设备上使用完整的桌面导航 - 寻找替代移动菜单以提高可用性可能会更好，但这至少会使其保持原样。
@media (max-width: 1000px){
#navigation-container li a{
font-size: 3vw;
padding: 5px 1vw
}
}
关于html - 我如何在我的导航栏中更改它以及如何更改代码以使其适合任何屏幕？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46649189/