Question

这应该是如此简单，但却让我望而却步。我只希望我的from timeit import timeit setup = """ from itertools import chain mylist = ['dog', 'cat', 'mouse_bear', 'lion_tiger_rabbit', 'ant'] """ methods = { 'AChampion': """[animal for word in mylist for animal in word.split('_')]""", 'hiro_protagonist': """list(chain.from_iterable(item.split('_') for item in mylist))""", 'Eugene_Sh': """'_'.join(mylist).split('_')""", 'cᴏʟᴅsᴘᴇᴇᴅ': """list([(yield from x.split('_')) for x in mylist])""", 'jdehesa': """sum((s.split("_") for s in mylist), [])""", 'mogga': """[i for sublist in [j.split('_') for j in mylist] for i in sublist]""", 'Ajax1234': """list(chain(*[[i] if "_" not in i else i.split("_") for i in mylist]))""" } print('-----------------------------------------') for author, method in methods.items(): print('{} time: {}'.format(author, round(timeit(setup=setup, stmt=method), 4))) print('-----------------------------------------')和我的span出现在同一条线上，一条线旁边，但它们出现在不同的线上。有人可以帮助我吗？

h3

header {
  background-color: black;
  color: white;
  padding: 10px;
  width: 100% !important;
  display: flex;
}

header .glyphicon {
  font-size: 1.5em;
  margin: 5px;
}

Answer 1

您的display: flex被bootstrap display: block样式覆盖。使用important或更具体的选择器来覆盖此选项。同时添加align-items: baseline以将flex-items放在字体的基线上。

演示：

＆＃13;

header {
  background-color: black;
  color: white;
  padding: 10px;
  width: 100% !important;
  display: flex !important;
  align-items: baseline;
}

header .glyphicon {
  font-size: 1.5em;
  margin: 5px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<header>
  <span class="glyphicon glyphicon-menu-hamburger"></span>
  <h3>Home</h3>
</header>

＆＃13;

顺便提一下display: inline和display: inline-block答案的工作原因是内联元素的默认vertical-align: baseline属性。

Answer 2

您只需将内部元素设置为display: inline-block;

即可

＆＃13;

header {
  background-color: black;
  color: white;
  padding: 10px;
  width: 100% !important;
  display: flex;
}

header .glyphicon {
  font-size: 1.5em;
  margin: 5px;
}

header > span,
header > h3 {
  display: inline-block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<header>
  <span class="glyphicon glyphicon-menu-hamburger"></span>
  <h3>Home</h3>
</header>

＆＃13;

Answer 3

这是因为浏览器将默认样式应用于h3元素。快速解决方法是向display: inline;添加h3样式。

＆＃13;

header {
  background-color: black;
  color: white;
  padding: 10px;
  width: 100% !important;
  display: flex;
}

header .glyphicon {
  font-size: 1.5em;
  margin: 5px;
}

h3 {
  display: inline;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<header>
  <span class="glyphicon glyphicon-menu-hamburger"></span>
  <h3>Home</h3>
</header>

＆＃13;

Answer 4

默认情况下，

h3是一个块元素。 span是内联的。

您的h3应该display: inline，inline-block。

https://jsfiddle.net/h81pkpne/1/

Answer 5

display: flex应该看起来像<header>正在被normalize.css覆盖到display: block所以应用了类.header并从h3中移除了边距。

使用内联（或浮动）提供的其他答案也可以使用

.header {
  background-color: black;
  color: white;
  padding: 10px;
  width: 100%;
  display: flex;
  align-items: center;
}

header .glyphicon {
  font-size: 1.5em;
}

header h3 {
  margin: 2px 0 0 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<header class="header">
  <span class="glyphicon glyphicon-menu-hamburger"></span>
  <h3>Home</h3>
</header>

获得span和h3在同一条线上

5 个答案: