Question

您好我已经尝试在同一行上创建span和h1元素。但是float:right会导致跨越顶部。我试过不同的方法，我不想使用保证金属性。对此有什么想法？

 <div class="block">
    <h1 class="pull-left">Carl</h1>
    <span class="pull-right">$4.81</span>
    <div style='clear:both'></div>
  </div>

CSS：

.pull-left{
  float:left;
  width:70%;
}
.pull-right:{
  float:right;
  width:20%;
}

任何帮助都将不胜感激。

Answer 1

它只是h1标签的默认边距，你需要删除它。

如果你想基于h1垂直居中跨度，那么只需使用行高：字体大小为h1

Fiddle Here

<div class="block">
  <h1 class="pull-left">Carl</h1>
  <span class="pull-right">$4.81</span>
  <div style='clear:both'></div>
</div>

CSS如下

.block h1
{
  margin:0px;
}
.block span
{
  line-height:2em;
}
.pull-left{
  float:left;
  width:70%;
}
.pull-right:{
  float:right;
  width:20%;
}

Answer 2

您已在pull-left上应用了<h1>课程，默认情况下，所有html标题都会被浏览器应用。如果您将pull-left应用于<div>，那么您将看不到任何额外空间，但如果您将使用<h1>或其他标题，则需要删除默认margin标题。

.pull-left {
  float: left;
  width: 70%;
}
h1.pull-left {
  margin: 0;
}
span.pull-right {
  padding-top: 10px;
}
.pull-right {
  float: right;
  width: 20%;
}

<div class="block">
    <h1 class="pull-left">Carl</h1>
    <span class="pull-right">$4.81</span>
    <div style='clear:both'></div>
  </div>

如果您希望标题和跨度为中间对齐，则最好使用inline-block，如下所示：

.block h1,
.block span {
  vertical-align: middle;
  display: inline-block;
}

.block h1 {
  width: 70%;
  margin: 0;
}

.block span {
  width: 20%;
}

<div class="block">
  <h1>Carl</h1>
  <span>$4.81</span>
</div>

Answer 3

使用display inline css value：

<h1 class="pull-left" style="display:inline">Carl</h1>
<span class="pull-right" style="display:inline">$4.81</span>

Answer 4

使用line-height在同一级别制作不同大小的文字。

.pull-left {
  float: left;
  width: 70%;
  line-height: 30px;
  margin: 0;
}
.pull-right {
  float: right;
  width: 20%;
  line-height: 30px;
}

<div class="block">
    <h1 class="pull-left">Carl</h1>
    <span class="pull-right">$4.81</span>
    <div style='clear:both'></div>
  </div>

我们在这里所做的是，我们使h1和span的身高相同，即使他们有不同的font-size。

检查MDN链接：

https://developer.mozilla.org/en/docs/Web/CSS/line-height

Answer 5

使用table-cell＆amp;垂直对齐，同样垂直对齐文字

＆＃13;

.block{
display:table;
width:100%;
}
.pull-left{
  width:70%;
  display:table-cell;
  vertical-align:middle;
}
.pull-right{
   width:20%;
   display:table-cell;
  vertical-align:middle;
}

＆＃13;

<div class="block">
    <h1 class="pull-left">Carl</h1>
    <span class="pull-right">$4.81</span>
    <div style='clear:both'></div>
  </div>

＆＃13;

Answer 6

在css文件的开头添加：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

浮动右移动跨度元素？

6 个答案: