Question

我正在尝试设计自定义按钮。为此，我创建了以下CSS（请参见下面的代码段）。

当我将css与<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:xs="http://www.w3.org/2001/XMLSchema" exclude-result-prefixes="xs" version="2.0"> <xsl:output method="xml" omit-xml-declaration="no"/> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> <xsl:template match="contentattributes"> <xsl:copy> <Data ss:Type="String"> <xsl:for-each-group select="attribute" group-by="@name[normalize-space(.)='qa_impacted_fct_areas']"> <xsl:value-of select="current-group()/@value" separator=", "/> </xsl:for-each-group> </Data> </xsl:copy> </xsl:template> </xsl:stylesheet>一起使用时，它可以正常工作。如果我将其与<button>元素一起使用，则按钮的宽度为100％。我知道使用<a>是这样做的原因，但是我不知道为什么它可以与我的按钮一起使用，但不能与我的display-block元素一起使用。它们都具有相同的显示属性，我认为它们的行为应相同。

（按钮应在彼此下方对齐，并放置在父级<a>的中间）。

两个按钮都应类似于第一个示例（使用.buttonRow）

<button>

.buttonRow {
  display: block;
  text-align: center;
}

.button {
  display: block;
  margin: 0 auto;
  margin-bottom: 15px;
  background-color: #ccad91;
  color: white;
  font-size: 18px;
  padding: 17px 50px;
  border-radius: 35px;
  border: none;
  outline: none;
  outline: 0;
}

Answer 1

按钮行为不同的原因是按钮是所谓的“ replaced element”，其（外观和）尺寸由操作系统/浏览器定义。无论如何，我建议在这里使用flex-box。

.buttonRow {
  display: flex;
  flex-direction: column;
}

.button {
  margin: 0 auto 15px auto;
  background-color: #ccad91;
  color: white;
  font-size: 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  padding: 17px 50px;
  border-radius: 35px;
  border: none;
  outline: none;
  text-decoration: none;
}

<div class="buttonRow">
  <button class="button">Proceed</button>
  <a class="button" href="index.html">Cancel</a>
</div>

<button>元素的显示属性与<a>元素不同

1 个答案: