Question

我有一些文本text-align: justify;该属性是在该文本中的链接和其他嵌套内联元素中继承的。我想为其中一些设置其他文本对齐模式，例如text-align: center;，但我不能。 Firebug显示父样式被覆盖，但嵌套的内联元素仍然是合理的。我在许多不同的浏览器中观察到这种奇怪的行为，显然他们是通过规范做到的？这真的是设计的吗？如何解决它？

编辑：一些示例代码。 ID = span1的跨度无法定义自己的文本对齐方式。它应该是右对齐的，但它是居中的。在我进行实验时，我注意到内联元素根本无法定义任何文本对齐。很奇怪。

<html>
<head>
<style type="text/css">
#cubic { width: 495px; height: 200px; background-color: green; text-align: center}
#span1 {text-align: right; color: red}
</style>
</head>

<body>
<p id="cubic">
<span id="span1">This is span 1</span>
</p>
</body>
</html>

Answer 1

正确;内联元素不能有文本对齐集，除非它们设置为显示块。

简单示例：

<html>
<style>
    #spanInline {text-align:right;}
    #spanBlock {text-align:right;display:block;}
    #divBlock {text-align:right;}
    #divInline {text-align:right;display:inline;}
</style>
<body>
<span id="spanInline">asdf</span><br />
<span id="spanBlock">asdf</span><br />
<div id="divBlock">asdf</div><br />
<div id="divInline">asdf</div><br />
</body>
</html>

如果你在元素周围抛出边框，你会看到更多关于它不起作用的信息。

Answer 2

实际上，text-align仅适用于块元素，而span不是块元素。请尝试以下代码：

<p id="cubic">
<div id="span1">This is div 1</div>
</p>

并检查它是否符合您的需求。

Answer 3

自己进入这个问题，更快的解决方法是使用内联块：

#span1 { display: inline-block; text-align: right; color: red}

将跨度设置为普通块元素并不好，因为块元素将在元素之前和之后添加换行符。如果你在段落中有跨度，它将完全打破段落。

text-align justify，无法覆盖

3 个答案: