Html css:如何在同一行的2个标签之间获得空格?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8518479/
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 12:02:03  来源:igfitidea点击:

css:how to get spaces in between 2 labels on the same line?

htmlcss

提问by user603007

i am trying to display a few labels with a fair bit of space in between them on the same line in an html document. This does work. How to get this working in a nicer way?

我试图在 html 文档的同一行上显示一些标签,它们之间有相当多的空间。这确实有效。如何让它以更好的方式工作?

<div>
firstlabel &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp secondlabel

</div>

回答by peduarte

You could wrap your 'labels' in <span>tags, give them classes, and add marginwith CSS.

您可以将“标签”包装在<span>标签中,为它们提供类,并添加marginCSS。

Example here: http://jsfiddle.net/peduarte/Rf5kB/

这里的例子:http: //jsfiddle.net/peduarte/Rf5kB/

HTML

HTML

<div>
    <span class="firstLabel">firstlabel</span>
    <span class="secondLabel">secondlabel</span>
</div>

CSS

CSS

.firstLabel {
    margin-right: 50px;
}

回答by Maheep

You should use a semicolon after &nbsp.

您应该在   之后使用分号。

<div>
firstlabel &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; secondlabel
</div>

回答by Amit Jain

Try this:

尝试这个:

<div class="main">
    <div class="left">firstlabel</div>
    <div class="right">secondlabel</div>
</div>

.main{
   width:220px;
    }
.left{
    width:110px;
    float:left;
    text-align:left;
    }
.right{
    width:110px;
    float:right;
    text-align:right;
    }

回答by Jukka K. Korpela

Whether it works depends on the browser; the correct notation is &nbsp;with a semicolon (as mentioned by nyarlathotep). But no-break spaces give you very rough control. A better approach is to use CSS, e.g.

是否有效取决于浏览器;正确的符号是&nbsp;分号(如 nyarlathotep 所述)。但是不间断的空间给你非常粗略的控制。更好的方法是使用 CSS,例如

<div><span style="padding-right: 5em">firstlabel</span>secondlabel</div>

You can tune the padding-right value, using whatever units are suitable for your context. But generally, the em unit is most suitable, as it means that the spacing is automatically scaled when font size is changed.

您可以使用适合您上下文的任何单位来调整 padding-right 值。但一般来说,em 单位是最合适的,因为它意味着当字体大小改变时间距会自动缩放。

回答by ZSC100

I'm surprised that no one suggested the simple inline style: <div style="margin-right: 500px;">firstlabel</div>

我很惊讶没有人建议使用简单的内联样式: <div style="margin-right: 500px;">firstlabel</div>

回答by codeling

The correct non breakable space entity is &nbsp;, you forgot the semicolon at the end (;). A better way, however, to achieve what you want to do would be to enclose firstlabel and secondlabel in <span>tags and use css to make them stand apart, like suggested by peduarte.

正确的非易碎空间实体是&nbsp;,您忘记了末尾的分号 (;)。然而,实现您想要做的更好的方法是将 firstlabel 和 secondlabel 包含在<span>标签中,并使用 css 使它们分开,就像peduarte建议的那样

回答by mas-designs

Sorry but this is a really freaky way to do that. Why don't you place those Labels in <p>-Tagsand format the spacing via margin,padding ?

对不起,但这是一个非常奇怪的方式来做到这一点。为什么不将这些标签放入<p>-Tags并通过边距、填充来格式化间距?

回答by Vinod

<label >Subscription Expiry: 2019=04-30 00:00:00<br><br></label>     

Subscription Type: paid

订阅类型:付费