0

这是我的小提琴供参考。

这是用于创建换行符并将“比较”按钮居中的html标记

<p><center><a class="awesome medium orange" href='#'>Compare</a></center></p><center><span style="font-size: xx-small;">Sold by someone</span>

你更喜欢使用 css 而不是标签？我应该添加两个额外的类，比如.center.awesomeand.linebreak.awesome来完成这项工作吗？

我尝试过类似的东西

.center.awesome{
    text-align:center;
    margin: 0px auto 0px auto;
}

但它不起作用。

CSS参考：

.awesome{
background: #222 url() repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25); 
position: relative;
cursor: pointer;
}

.medium.awesome {
font-size: 13px;
    }
.orange.awesome {
background-color: #ff5c00;
}
4

1 回答 1

1

之所以要使用 CSS 进行样式设置而不是 HTML 标签，来自于各种编程的一个非常重要的原则：关注点分离. 您希望将 HTML 纯粹用于网页中的结构对象，然后您可以纯粹使用 CSS 设置和放置对象。这样做的原因是，随着项目的增长，跟踪小的“类似 CSS 的修复”（内联 CSS 或中心标签）、它们的放置位置以及做什么，对你来说会变得非常困难和沮丧开发商。因此，尽量将所有样式代码保存在外部 CSS 文档中，将所有 Javascript 函数声明保存在另一个外部文档中，并尽可能将纯 HTML 保存在其他文档中。您可能看不到小型项目的意义，但这种做法对于琐碎的项目来说是真正的救星。

更新：

至于你的另一个问题：为什么会

<center><a...></a></center>

使按钮居中，而

<a class="center">...</a>

惯于？

这是因为将带有text-align:center的class ="center"添加到a元素中，将使a 元素内的内容居中，而不是元素本身。如果要使整个a元素居中，则应使用另一个标签封装该元素，并将该标签的内容居中，例如：

<div class="center">
    <a ...>Buttontext</a>
</div>

这将使div元素内的内容居中。如果div元素具有全宽，这会将a -link 居中。

希望有帮助！

于 2013-09-09T17:02:39.973 回答