顶部导航栏中的一行上的两个div

Question

在过去的一个小时里，我一直在寻找有关如何在同一行上创建两个div的建议，但是它们要么不起作用，要么仅适用于带文本的div。我正在为网站制作一个导航栏，其中包含我的网站徽标和跳转到网站各部分的图标，但是我无法使它们位于同一行。

我只希望图标（在蓝色容器中）向上移动并紧靠我的徽标。如果有人可以告诉我我可以做些什么来解决此问题，将不胜感激。

此外，如果正在解决此问题有任何不同，我正在使用Bootstrap 4。

当前我的导航栏：

我希望导航栏显示如下：

我的导航栏HTML：     

<div class="d-block d-xs-block d-md-none" id="topnav">
    <div id="topnav-logo">
        <a href="https://dmoini.github.io/"><img src="images/logo.png" id="logo-topnav"></a>
    </div>
    <div class="text-center" id="topnav-icons">
        <a href="#home" id="topnav-home"><i class="fa fa-home" aria-hidden="true"></i></a>
        <a href="#about" id="topnav-about"><i class="fa fa-user" aria-hidden="true"></i></a>
        <a href="#experience" id="topnav-experience"><i class="fas fa-file-alt" aria-hidden="true"></i></a>
        <a href="#portfolio" id="topnav-portfolio"><i class="fas fa-book-open" aria-hidden="true"></i></a>
        <a href="#contact"><i class="fas fa-address-book" aria-hidden="true"></i></a>
    </div>
</div>

我的Navbar CSS（您可以忽略这些注释，因为它们只是我试图解决此问题的原因）：     

#topnav {
    /* TODO: change height back to 60px when done fixing*/
    height: 120px;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    background: black;
    /* TODO: change overflow back to hidden when done fixing*/
    overflow: auto;
}

#topnav-icons {
    margin-left: 60px;
    width: calc(100vw - 60px);
    padding-top: 11px;
    padding-bottom: 11px;
    background: blue;
}

#topnav-icons a {
    /* float: left;
    display: inline-block; */
    color: var(--gray);
    /* text-align: center; */
    text-decoration: none;
    font-size: 25px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

#sidenav-icons a:hover, #topnav-icons a:hover, #contact a:hover {
    color: var(--seafoam);
}

#logo-sidenav, #logo-topnav {
    height: 60px;
    width: 60px;
    padding: 10px;
}

Answer 1

我不确定它是否可以满足您的要求，但是在图像上添加float:left可能是个窍门。 看到这个jsfiddle

<div class="d-block d-xs-block d-md-none" id="topnav">
    <div id="topnav-logo">
        <a href="https://dmoini.github.io/"><img src="images/logo.png" id="logo-topnav"></a>
    </div>
    <div class="text-center" id="topnav-icons">
        <a href="#home" id="topnav-home"><i class="fa fa-home" aria-hidden="true"></i></a>
        <a href="#about" id="topnav-about"><i class="fa fa-user" aria-hidden="true"></i></a>
        <a href="#experience" id="topnav-experience"><i class="fas fa-file-alt" aria-hidden="true"></i></a>
        <a href="#portfolio" id="topnav-portfolio"><i class="fas fa-book-open" aria-hidden="true"></i></a>
        <a href="#contact"><i class="fas fa-address-book" aria-hidden="true"></i></a>
    </div>
</div>

和CSS

#topnav {
    /* TODO: change height back to 60px when done fixing*/
    height: 120px;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    background: black;
    /* TODO: change overflow back to hidden when done fixing*/

}

#topnav-icons {
    margin-left: 60px;
    width: calc(100vw - 60px);
    padding-top: 11px;
    padding-bottom: 11px;
    background: blue;

}

#topnav-icons a {
    /* float: left;
    display: inline-block; */
    color: var(--gray);
    /* text-align: center; */
    text-decoration: none;
    font-size: 25px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

#sidenav-icons a:hover, #topnav-icons a:hover, #contact a:hover {
    color: var(--seafoam);
}

#logo-sidenav, #logo-topnav {
    height: 60px;
    width: 60px;
    float:left;
}

Answer 2

Flexbox -您实际上可以将d-block上的d-flex更改为id="topnav"，这几乎是正确的：

将<div class="d-block d-xs-block d-md-none" id="topnav">更改为<div class="d-flex d-md-none" id="topnav">

我还删除了不需要的d-xs-block。

我相信您可以从height: 120px中删除#topnav，因为高度将由商品本身决定，您可能希望删除margin-left: 60px;上的#topnav-icons。我在下面的代码段中做了这些更改。

#topnav {
  /* TODO: change height back to 60px when done fixing*/
  /* height: 120px; */
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  background: black;
  /* TODO: change overflow back to hidden when done fixing*/
  overflow: auto;
}

#topnav-icons {
/* margin-left: 60px; */
width: calc(100vw - 60px);
padding-top: 11px;
padding-bottom: 11px;
background: blue;
}

#topnav-icons a {
/* float: left;
display: inline-block; */
color: var(--gray);
/* text-align: center; */
text-decoration: none;
font-size: 25px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}

#sidenav-icons a:hover, #topnav-icons a:hover, #contact a:hover {
color: var(--seafoam);
}

#logo-sidenav, #logo-topnav {
height: 60px;
width: 60px;
padding: 10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<div class="d-flex d-md-none" id="topnav">
<div id="topnav-logo">
    <a href="https://dmoini.github.io/"><img src="http://pluspng.com/img-png/bootstrap-logo-vector-png-bootstrap-logo-512.jpg" id="logo-topnav"></a>
</div>
<div class="text-center" id="topnav-icons">
    <a href="#home" id="topnav-home"><i class="fa fa-home" aria-hidden="true"></i></a>
    <a href="#about" id="topnav-about"><i class="fa fa-user" aria-hidden="true"></i></a>
    <a href="#experience" id="topnav-experience"><i class="fas fa-file-alt" aria-hidden="true"></i></a>
    <a href="#portfolio" id="topnav-portfolio"><i class="fas fa-book-open" aria-hidden="true"></i></a>
    <a href="#contact"><i class="fas fa-address-book" aria-hidden="true"></i></a>
</div>
</div>

Answer 3

应该是这样的：

#topnav {
        /* TODO: change height back to 60px when done fixing*/
        height: 120px;
        width: 100%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        background: black;
        /* TODO: change overflow back to hidden when done fixing*/
        overflow: auto;
    }

    #topnav-icons {
      width: calc(100% - 80px);
      padding-top: 11px;
      padding-bottom: 11px;
      background: blue;
      float: left;
    }
    
    #topnav-logo { float: left; }

    #topnav-icons a {
        /* float: left;
        display: inline-block; */
        color: var(--gray);
        /* text-align: center; */
        text-decoration: none;
        font-size: 25px;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    #sidenav-icons a:hover, #topnav-icons a:hover, #contact a:hover {
        color: var(--seafoam);
    }

    #logo-sidenav, #logo-topnav {
        height: 60px;
        width: 60px;
        padding: 10px;
    }

<div class="d-block d-xs-block d-md-none" id="topnav">
        <div id="topnav-logo">
            <a href="https://dmoini.github.io/"><img src="images/logo.png" id="logo-topnav"></a>
        </div>
        <div class="text-center" id="topnav-icons">
            <a href="#home" id="topnav-home"><i class="fa fa-home" aria-hidden="true"></i></a>
            <a href="#about" id="topnav-about"><i class="fa fa-user" aria-hidden="true"></i></a>
            <a href="#experience" id="topnav-experience"><i class="fas fa-file-alt" aria-hidden="true"></i></a>
            <a href="#portfolio" id="topnav-portfolio"><i class="fas fa-book-open" aria-hidden="true"></i></a>
            <a href="#contact"><i class="fas fa-address-book" aria-hidden="true"></i></a>
        </div>
    </div>