Html 在同一行显示 Div + span?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5963953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:32:05  来源:igfitidea点击:

Display Div + span on same line?

htmlcss

提问by Skizit

Having trouble displaying a div and a span on the same line.. their styles are..

在同一行上显示 div 和 span 时遇到问题..他们的样式是..

DIV

DIV

 color: black;
 display: inline;
 font-family: arial, sans-serif;
 font-size: 13px;
 height: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 overflow-y: visible;
 padding-top: 0px;
 white-space: nowrap;
 width: 0px;

SPAN

跨度

color: black;
display: inline;
font-family: arial, sans-serif;
font-size: 13px;
height: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-y: visible;
padding-top: 0px;
width: 0px;

DIV WHICH BOTH ARE WRAPPED IN

两者都包裹的 DIV

color: black;
display: block;
float: left;
font-family: arial, sans-serif;
font-size: 13px;
height: 20px;
margin-bottom: 0px;
margin-left: 8px;
margin-right: 0px;
margin-top: 0px;
overflow-y: visible;
padding-top: 1px;
width: 373px;

What would I need to change to get the div and span displaying on the same line? currently the div displays and then the span on the line under it.

我需要更改什么才能让 div 和 span 显示在同一行上?当前 div 显示,然后是它下面的行上的跨度。

回答by Eddie

You need to add display:inline;

你需要添加 display:inline;

回答by Ash Burlaczenko

Check out this jsFiddle.

看看这个jsFiddle

You are missing floats an position in your css.

您缺少在 css 中浮动一个位置。

Hope this helps.

希望这可以帮助。

回答by cusimar9

The default 'display' value for a Div is to be a block level element, like a paragraph, that covers the whole 'line'.

Div 的默认“显示”值是块级元素,如段落,覆盖整个“行”。

You need to set the Div to be 'display: inline' to appear next to the span element.

您需要将 Div 设置为 'display: inline' 以显示在 span 元素旁边。

回答by David Fells

This is hard to answer without the HTML. At a first glance, I'd say you should float them both left.

如果没有 HTML,这很难回答。乍一看,我会说你应该把它们都向左浮动。

回答by Vinnyq12

I think float:left on div should do the job.

我认为 float:left on div 应该可以完成这项工作。