我有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>
&#13;
答案 0 :(得分:0)
只要您想在移动设备上使用桌面导航布局,就可以使用最少的更改来完成此工作。
https://codepen.io/will0220/pen/YrabEm
您希望将导航栏和导航栏包装更改为100%宽度 - 如果您不希望超出特定大小,则可以添加最大宽度。从那里,为较小的设备添加媒体查询,以较小的尺寸开始(在我的示例中为1000px但可以更低)并切换到视口单元以获取nav元素的字体大小/填充。只有当您想要在移动设备上使用完整的桌面导航时才会这样 - 它可能更适合寻找可用的备用移动菜单,但这至少会使其适合原样。
@media (max-width: 1000px){
#navigation-container li a{
font-size: 3vw;
padding: 5px 1vw
}
}