Html 显示:表格和文本右对齐不起作用

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

Display: table and text-align right not working

htmlcsstext-align

提问by OptimusCrime

I've got a html-structure like this:

我有一个这样的 html 结构:

<div class="campain">
    <div class="campainText">
        <a href="#"><h2>Ny app til iPhone og iPad</h2></a>
        <a href="#"><h2>Tips og vinn</h2></a>
    </div>
    <div class="campainPicture">
        Picture goes here
    </div><div class="clear"></div>
</div>

And I'd like the campainText to be right-align. The css for this element is this:

我希望campainText 右对齐。此元素的 css 是这样的:

font-family: 'Spinnaker', sans-serif;
font-size: 17px;
color: #FFFFFF;
background-color: #A2AD00;
display: table;
padding: 4px;
margin: 4px 4px 4px 4px;
text-decoration: none;

I know that the rest of the css is working. The problem is that the text is left-aligned if I include the table-option in the display-field. As soon as I remove this, it works as expected. Are there any workarounds for this, or do I have to use display: inline and <br />tags?

我知道 css 的其余部分正在工作。问题是如果我在显示字段中包含表格选项,则文本左对齐。一旦我删除它,它就会按预期工作。是否有任何解决方法,或者我是否必须使用 display: inline 和<br />标签?

回答by Rob W

Fiddle: http://jsfiddle.net/xbNCZ/

小提琴:http: //jsfiddle.net/xbNCZ/

"Table + text-align:rightdoes not work", because a table element doesn't stretch to the full width by default. Add width:100%to get the desired result.

"Table +text-align:right不起作用",因为默认情况下表格元素不会拉伸到全宽。添加width:100%以获得所需的结果。

Before/ Aftersetting width:100%.

设置之前/之后width:100%