代码之家 › 专栏 › 技术社区 › Trung Bún

使DIV块内的DIV元素与内联

css html

Trung Bún · 技术社区 · 7 年前

我正在开发我的网站,目前正在制作导航栏。

当屏幕大小小于800px时,下面的小提琴代表导航栏,我希望我的徽标在左侧,而切换导航按钮在右侧。

我试过置业 display: inline; 到 .logo img 和 .navbar-toggle 但它不起作用。

为什么我错了?我该怎么修?

这是小提琴: http://jsfiddle.net/mbHB4/9720/

这是HTML:

<div class="navbar-header">
  <div class="logo">
    <img src="http://www.sherkspear.com/wp-content/uploads/2015/04/jsfiddle.png"/>
  </div>
  <button type="button" class="navbar-toggle" data-toggle="collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
  </button> 
</div>

这是CSS:

.navbar-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 50%;
  flex-direction: row-reverse;
}
.logo img {
  padding: 9px 10px;
  border: 5px solid blue;
  border-radius: 4px;
  width: 100%;
  height: 100%;
}
.navbar-toggle {
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: green;
  border: 5px solid red;
  border-radius: 4px;
}

4 回复 | 直到 7 年前

Vikas Jadhav 7 年前

我已经修改了你的代码并添加了 display:flex 并删除不需要的代码。希望能帮上忙:)

.navbar-header {
  width: 100%;
  display:flex;
  align-items:center;
}
.logo{
	 width: 100%;
}
.logo img {
  border: 5px solid blue;
  border-radius: 4px;
  width: 100px;
}
.navbar-toggle {
  width: 120px;
}

<div class="navbar-header">
  <div class="logo">
    <img src="http://www.sherkspear.com/wp-content/uploads/2015/04/jsfiddle.png"/>
  </div>
  <div class="navbar-toggle">
    <button type="button"  data-toggle="collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
  </button>
  </div>
</div>

G43beli 7 年前

如果你不想用 display: flex; 作为完美的答案奎比 ,您可以使用此CSS并使用 float 进场(方法) see this fiddle ):

    .navbar-toggle, .logo {
      float: left;
      width: 50%;
    }
    .logo img {
      padding: 9px 10px;
      border: 5px solid blue;
      border-radius: 4px;
      width: 100%;
      height: 100%;
   }
   .navbar-toggle {
      padding: 9px 10px;
      margin-top: 8px;
      margin-bottom: 8px;
      background-color: green;
      border: 5px solid red;
      border-radius: 4px;
   }

如果您想在左侧使用切换按钮,只需更改HTML中的顺序即可。这样,徽标首先出现在DOM中,然后出现在按钮中

Qubis741 7 年前

将导航栏标题更改为:

.navbar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 50%;
  flex-direction: row-reverse;
}

编辑:

如果不想编辑HTML,请使用flex-direction。裁判: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Nikolay Fedorov 7 年前

使用媒体查询或引导。您的代码示例:

@media (max-width:799px){
  .navbar-toggle{float:right}
  .logo{
    float:left;
    width:50%;
  }
  .navbar-header{
    display:block;
    width:100%;
  }
}