我正在尝试进行响应式布局，但这对我来说不太好。我在顶部有两个元素，我需要将第一个元素向左浮动，将第二个元素向右浮动，但是我似乎都无法很好地将它们对齐。
所以我的第一个问题是，无论在大屏幕还是小屏幕上，我如何都能使它们很好地对齐。
第二个问题是，为什么我会在小屏幕菜单上看到滚动条，以及如何防止滚动条出现？
这是我的代码：
<div class="container">
<div class="Top">
<nav class="pull-left">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
ds
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">STARTSIDA</a>
</li>
<li><a href="#">VÅR VERKSAMHET</a>
</li>
<li><a href="#">REFERENSER</a>
</li>
<li><a href="#">KUNDER</a>
</li>
<li><a href="#">OM OSS</a>
</li>
<li><a href="#">KONTAKT</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<div class="Logo pull-right"> <span class="fa fa-cogs"></span>
<span class="Header">Strand<span>maskin</span>.com</span>
</div>
</div>
</div>
如果是的话，你们中的每个人都有在哪里学习响应式技巧的提示，我很乐意接受所有建议。
如果要使顶部元素左右移动，请检查以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
.container{
max-width: 100%;
}
.container .top-element-left {
max-width: 45%;
background-color: skyblue;
float: left;
}
.top-element-right {
background-color: skyblue;
max-width: 45%;
float: right;
}
</style>
<div class="container">
<div class="top-element-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad facilis quae nihil perspiciatis atque impedit et, eius, quidem consequatur fugit.</div>
<div class="top-element-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut laudantium, minus nobis vel dignissimos inventore?</div>
</div>
</body>
</html>
对于响应式Web开发的建议：我建议您开始使用susy。对我来说，在使用CSS时，生活从未如此轻松，直到我偶然发现了可疑之处
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句