Question

我将3张图像移动到同一行并按顺序出现问题。我已经设法让Navbar和正确的激情唱歌，但是当我尝试添加3ed图像时它会将它移动到第二行。我虽然是造成它的图像尺寸，但我将它们全部改为50px / 50px仍然有问题。

当前问题

登录/信息图片

中心导航栏图片3

我想要实现的目标4

我还不熟悉CSS和HTML，所以如果您有任何关于清理我的代码或任何技巧的提示，请告诉我们！

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="bootstrap.mini.css">
</head>


<body>
<img src="" class="banner">

<div class="topnav">
  <div class="nav">
    <a class="active" href="#home">Forums</a>
    <a href="#news">Help</a>
    <a href="#contact">store</a>
    <a href="#about">contact</a>
    </div>

     <div class="infobg">
     <div class="info">
     <a href="#about">info</a>
     </div>
     </div>

     <div class="loginbg">
     <div class="login">
     <a href="#about">singin</a>
     </div>
        </div>

      </body>

      </html>

 body {
 background-image:url(images/background.jpg);
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 }

 /*Center Navbar*/
 .topnav {
   display: block;
   left: -50px;
   margin: 10px auto;
   width: 1000px;
   height: 200px;
   line-height: 200px;
   background-image:url(images/nav.png);
   background-repeat: no-repeat;
   background-position: left;
   background-size:100%;
   position: relative;
 }

 /*Center Navbar text postion*/
 .topnav .nav {
   position: absolute;
   left: 10px;
   width: 80%;
 }

 /*Center Navbar text style*/
 .topnav .nav a  {
   line-height: 60px;
   display: inline-block;
   color: #f2f2f2;
   text-align: center;
   text-decoration: none;
   font-size: 17px;
   width: 24%;
 }

 /*right login Navbar*/
 .loginbg {
   display: block;
   left: 650px;
   margin: 2px auto;
   width: 900px;
   height: 200px;
   line-height: 200px;
   background-image:url(images/login.png);
   background-repeat: no-repeat;
   background-position: left;
   background-size:100%;
   position: relative;
 }

 /*right login navbar text postion*/
 .login {
   position: absolute;
   left: 425px;
   width: 80%;
 }

 /*right login navbar text style*/
 .loginbg .login a  {
   line-height: 60px;
   display: inline-block;
   color: #f2f2f2;
   text-align: center;
   text-decoration: none;
   font-size: 17px;
   width: 24%;
 }

 /*left info Navbar*/
 .infobg {
    display:inline;
   display: block;
   left: 800px;
   margin: 2px auto;
   width: 900px;
   height: 200px;
   line-height: 200px;
   background-image:url(images/login.png);
   background-repeat: no-repeat;
   background-position: left;
   background-size:100%;
   position: relative;
 }

 /*left info navbar text postion*/
 .info {
   position: absolute;
   left: 425px;
   width: 80%;
 }

 /*left info navbar text style*/
 .infobg .info a  {
   line-height: 60px;
   display: inline-block;
   color: #f2f2f2;
   text-align: center;
   text-decoration: none;
   font-size: 17px;
   width: 24%;
 }

 .navbackground {
   position: absolute;
   top: -10px;
   left: 0;
   right: 0;
   bottom: 700px;
   margin: auto;
   width: 50%;
 }

 .banner {
 display: inline;   
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   margin: auto;
   width: 100%;

 }

Answer 1

稍微改变问题的方法是有意义的。这个答案假设您无法更改标记的源顺序，最好的解决方案是在topnav之前移动info链接。

使用此标记，您可以使用flexbox命令更改项目的顺序。

.topnav {
    position: fixed;
    /* set this percentage to what you want but be aware of device 
    widths */
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content:space-around;
}

因此，对于这两个孩子，您可以使用订单属性

.info {
   order: -1;
}
.login {
    order: 2;
}

你写的样式中有很多冲突的属性，所以为了证明我的意思是一个codepen： https://codepen.io/NeilWkz/pen/ZoeZxg

SIDENOTE：我也注意到你已经加载了bootstrap，你可能会发现使用bootstrap网格类编写它更容易

多个导航栏背景位置

1 个答案: