导航样式问题

Question

我非常接近完成我的响应式导航栏，它似乎在移动设备上运行良好，但是在桌面上我无法让图像与导航的其余部分内联？我可以让它以 width: 100% 出现，但它占用了其余导航链接内联的全部空间？

我曾尝试向左/向右浮动，但它会消失，直到在移动视图中 - 任何帮助将不胜感激！在下面找到我的 HTML、CSS 和屏幕截图 - 希望对您有所帮助！

谢谢！

@import url('https://fonts.googleapis.com/css?family=Ubuntu');
@import url("https://fonts.googleapis.com/css?family=Open+Sans");


body { 
  margin: 0;
  font-family: Arial;
}

.logo{
  background-image: url("../images/placeholder-image.jpg");
  background-repeat: no-repeat;
  height: 50px;
  width: 100%;
  display: inline-block;
  vertical-align: top;
}.search-logo{
  border: none;
  background-color: transparent;
  outline: none;
}


.nav-links a {
  display: inline-block;
}

.search-bar{
  display: none;
}

.search-icon{
  font-size: 25px !important; //Due to icon inheriting from external css
  cursor: pointer;
}

* {
  box-sizing: border-box;
}


.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 100px;
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.nav-header{
  position: absolute;

  &--header-left{
    float: left;
    left: 15%;
  }

  &--header-right{
    float: right;
    right: 15%;
  }
}

.header-right {
  float: right;
  position: absolute;
  right: 15%;
}

.header-left {
  float: left;
}

@media screen and (max-width: 768px) {
  .header a {
    float: none;
    display: block;
    text-align: center;
  }

  .header a.logo {
    text-align: center;
    width: 100%;
  }

  .nav-header--header-right,
  .nav-header--header-left {
    float: none;
    position: static;
  }

  .logo{
    background-position: center;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="header">
  <div class="nav-header--header-left">
    <div class="logo"></div>
  </div>
  <div class="nav-header--header-right">
    <a href="#">ABOUT US</a>
    <a href="#">OUR WORK</a>
    <a href="#">NEWS</a>
    <a href="#">CAREER</a>
    <a href="#">CONTACT</a>
    <a>
      <button type="submit" class="search-logo"><i class="fa fa-search search-icon"></i></button>
      <input type="text" placeholder="Search.." name="search" class="search-bar">
    </a>
  </div>
</div>

Desktop image (with image not showing on the left) Mobile devices where image shows correctly

Answer 1

您的.logo DIV 定义为display: inline-block; 和width: 100%，但没有任何内容（背景图像不算作内容）。

width: 100% 指的是父元素，由于它也没有设置宽度且没有其他内容，因此它的宽度为零，因此保持不可见。

为避免这种情况，您可以在.logo 上使用带有px 值的min-width 设置

Answer 2

请看这段代码

@import url('https://fonts.googleapis.com/css?family=Ubuntu');
@import url("https://fonts.googleapis.com/css?family=Open+Sans");


body { 
  margin: 0;
  font-family: Arial;
}
.header{
  display: flex;
    justify-content: space-between;
}
@media screen and (max-width: 767px){
  .header{    
    flex-direction: column;
    align-items: center;
  }
}
.logo{
  background-image: url("http://via.placeholder.com/350x150");
  background-repeat: no-repeat;
  height: 50px;
  width: 200px;
  display: inline-block;
  vertical-align: top;
}.search-logo{
  border: none;
  background-color: transparent;
  outline: none;
}


.nav-links a {
  display: inline-block;
}

.search-bar{
  display: none;
}

.search-icon{
  font-size: 25px !important; //Due to icon inheriting from external css
  cursor: pointer;
}

* {
  box-sizing: border-box;
}


.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 100px;
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.nav-header{
  position: absolute;

  &--header-left{
    float: left;
    left: 15%;
  }

  &--header-right{
    float: right;
    right: 15%;
  }
}

.header-right {
  float: right;
  position: absolute;
  right: 15%;
}

.header-left {
  float: left;
}

@media screen and (max-width: 768px) {
  .header a {
    float: none;
    display: block;
    text-align: center;
  }

  .header a.logo {
    text-align: center;
    width: 100%;
  }

  .nav-header--header-right,
  .nav-header--header-left {
    float: none;
    position: static;
  }

  .logo{
    background-position: center;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="header">
  <div class="nav-header--header-left">
    <div class="logo"></div>
  </div>
  <div class="nav-header--header-right">
    <a href="#">ABOUT US</a>
    <a href="#">OUR WORK</a>
    <a href="#">NEWS</a>
    <a href="#">CAREER</a>
    <a href="#">CONTACT</a>
    <a>
      <button type="submit" class="search-logo"><i class="fa fa-search search-icon"></i></button>
      <input type="text" placeholder="Search.." name="search" class="search-bar">
    </a>
  </div>
</div>