HTML 按钮的大小彼此不相等，因为代码完全相同

Question

我想知道为什么我的按钮彼此不相等，因为 HTML 和 CSS 代码完全相同。

HTML 代码:

   <div class="export-left">    
    <button type="button" class="formreturn" value="Copy Url" onclick="Copy();">Copy Url</button>
    <label><input type="text" class="txtfilename" id="op-text-filename" placeholder="type file name"/>.txt</label>
    <button type="button" class="formreturn" onclick="saveURLtoTXTfile();"><span class="glyphicon glyphicon-download"></span>.TXT</button>  
    </div>
    <div class="export-right">
    <button type="button" class="excelsubmit" onclick="exportData()"><span class="glyphicon glyphicon-download"></span>.CSV</button>
    <button type="button" id="btnExport" class="excelsubmit" onclick="fnExcelReport();"><span class="glyphicon glyphicon-download"></span>.XLS </button>
    </div>

CSS

 .export {
display: flex;
align-items: flex-start;
}

 .export-left {
display: flex;
 }
 .export-right {
  margin-left: auto;
  }

  .formreturn {
  font-weight:700;
  text-decoration: none;
  color:black;
  background:#c6e2f2;
  padding: 8px;
  border-radius: 3px;   
  }

  .excelsubmit {
  font-weight:700;
  float: right;
  padding: 8px;
  background:#c6e2f2;
  border-radius: 3px;
  }

我哪里出错了？我希望这些按钮的尺寸(高度)大致相同。不幸的是，填充在这里不起作用。

Answer 1

给每个按钮一个额外的类，例如

<button type="button" class="btn formreturn"

然后在 CSS 中为类 btn 指定最小宽度

CSS

.btn{
  min-width: 100px;
}