Question

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

当屏幕尺寸小于800像素，我希望徽标位于左侧，切换导航按钮位于右侧时，下面的小提琴代表导航栏。

我尝试将属性display: inline;分别放置到.logo img和.navbar-toggle上，但这不起作用。

为什么我错了？我该如何解决？

这是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;
}

Answer 1

如果您不想使用display: flex;作为 Qubis 的完美答案，则可以使用此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中，然后出现在按钮中

Answer 2

将.navbar-header更改为：

.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/

Answer 3

我已经修改了您的代码，并将def get_prices(): url = "http://aeroportos.weebly.com/fuel-prices.html#.W7SM3mj7Sbj" driver = webdriver.Firefox() driver.implicitly_wait(30) driver.get(url) rows = driver.find_element_by_xpath('//*[@id="wsite-content"]/div/table/tbody').find_elements_by_tag_name('tr') prices = [] for row in rows: cells = row.find_elements_by_tag_name('td') country = cells[0].text code = cells[1].text name = cells[2].text price = cells[3].text prices.append(region, country, code, name, price) print(prices)添加到标题中，并删除了不需要的代码。希望有帮助：）

public function pseudoRandomSort(&$ids, $var1)
{
    $sorted = array();
    foreach ($ids as $id) {
        $sorted[md5($id.$var1)] = $id;            
    }
    ksort($sorted);
    $ids = array_values($sorted);
}

public function predictableShuffle(&$ids, $seed)
{
    srand($seed);
    shuffle($ids);
}

Answer 4

使用媒体查询或引导程序。一些示例您的代码：

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

使<img/>与div块内的div元素内联

4 个答案: