Question

当我在同一行上使用h3和p标签时，p标签从一个较高的高度开始

body {
  font-size: 4.5vh;
  height: 100%;
  width: 90%;
  position: relative;
  left: 5%;
  right: 5%;
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

header {
  position: relative;
}

#banner {
  float: left;
  color: #C93756;
}

#account {
  float: left;
}

<html>

<head>
  <title></title>
  <link rel="stylesheet" href="styles/index.css">
</head>

<body>
  <header>
    <h3 id="banner">samplewebsite.com</h3>
    <p id="account">Sign In</p>
  </header>
</body>

</html>

为什么会发生这种情况，如何使两个标签显示在同一级别？

Answer 1

由于字体大小以及相应的行高和边距设置，h3元素通常比p元素高。浮动元素的顶部对齐，这是由于元素的整体高度不同导致您在示例中看到的结果。

使用display: inline-block;代替float-默认情况下，将它们对准基线。

body{
	font-size:4.5vh;
    height:100%;
    width:90%;
    position: relative;
    left: 5%;
    right: 5%;
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
header {
    position: relative;
}

#banner {
    display: inline-block;
    color: #C93756;
}

#account {
    display: inline-block;
}

<html>
	<head>
		<title></title>
		<link rel="stylesheet" href="styles/index.css">
	</head>
	<body>
		<header>
			<h3 id="banner">samplewebsite.com</h3>
			<p id="account">Sign In</p>
		</header>
	</body>

</html>

在评论中出现其他问题后的替代解决方案：

您可以使用以下设置在父元素上使用display: flex，以将两个元素沿其基线在父元素的左右边缘对齐。

justify-content: space-between;进行左右分布（对于这种情况，对于两个元素），align-items: baseline;进行垂直对齐。在这种情况下，您不需要对子元素进行任何特殊设置。

body{
	font-size:4.5vh;
    height:100%;
    width:90%;
    position: relative;
    left: 5%;
    right: 5%;
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

#banner {
    color: #C93756;
}

<html>
	<head>
		<title></title>
		<link rel="stylesheet" href="styles/index.css">
	</head>
	<body>
		<header>
			<h3 id="banner">samplewebsite.com</h3>
			<p id="account">Sign In</p>
		</header>
	</body>

</html>

Answer 2

之所以发生这种情况，是因为new MarkerLayerOptions( markers: getAllMarker()),//this takes list of markers & i got error here ], //method to get list of markers getAllMarker() async { List<Marker> markers=new List(); markers=await setMarkers(); print(markers.length); return markers; } //method to add dummy markers in the list Future<List<Marker>> setMarkers() async { MarkersProperty markersProperty = new MarkersProperty(1, 51.5, -0.09); MarkersProperty markersProperty2 = new MarkersProperty(2, 61.5, -0.07); markersList.add(markersProperty); markersList.add(markersProperty2); for (int i = 0; i < markersList.length; i++) { marker.add(showMarkersonMap(markersList[i])); } await Future.delayed(const Duration(seconds: 30)); print("set marker list ${marker.length} "); return marker; } //method to return marker widget for a specific lat and lng Marker showMarkersonMap(MarkersProperty marker) { return new Marker( width: 50.0, height: 50.0, point: new LatLng(marker.lat, marker.lng), builder: (ctx) => new Container( child: Stack( alignment: Alignment.center, children: <Widget>[ Image.asset('images/pin.png'), Image.asset( 'images/circle.png', ), ], )), ); }从浏览器的默认样式中获取了<h3>，而font-size: 1.17em从您的样式中获取了<p>。

如果您想让font-size: 4.5vh从正文继承<h3>，则必须使用font-size指定。

#banner {font-size: inherit;}

body {
  font-size: 4.5vh;
  height: 100%;
  width: 90%;
  position: relative;
  left: 5%;
  right: 5%;
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

header {
  position: relative;
}

#banner {
  float: left;
  color: #C93756;
  font-size: inherit;
}

#account {
  float: left;
}

如何使p和h3标签以相同的高度开始？

2 个答案: