Question

我无法弄清楚这一点，所以我转向社区寻求帮助。提前致谢。我遇到的问题是，当我更改按钮中字体的大小时，按钮会调整大小。截至目前，我想将按钮保持在一个特定的大小。所以，我已经将我的按钮修复为特定大小，但现在我无法更改字体大小。我目前正在Chrome上运行我的程序。

这是HTML块：

<div class="file-input-wrapper">
  <button class="btn-file-input">Upload Documents</button>
  <input type="file" name="filesToUpload[]" id="filesToUpload" multiple="" onChange="makeFileList();" />
</div>
<p>
  <strong>Files You Selected:</strong>
  <ul id="fileList">
    <li>No Files Selected</li>
  </ul>
  <div class="file-input-wrapper1">
    <button class="btn-file-input1">Upload Documents</button>
    <input type="submit" value="Upload!" />
  </div>
</p>

<style type="text/css">
  .file-input-wrapper {
    width: 400px;
    height: 125px;
    overflow: hidden;
    position: relative;
  }

  .file-input-wrapper>input[type="file"] {
    font-size: 200px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
  }

  .file-input-wrapper>.btn-file-input {
    display: inline-block;
    width: 400px;
    height: 125px;
  }

  .file-input-wrapper:hover>.btn-file-input {
    background-color: #aaa;
  }

  .file-input-wrapper1 {
    width: 400px;
    height: 125px;
    overflow: hidden;
    position: relative;
  }

  .file-input-wrapper1>input[type="submit"] {
    font-size: 200px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
  }

  .file-input-wrapper1>.btn-file-input1 {
    display: inline-block;
    width: 400px;
    height: 125px;
  }

  .file-input-wrapper1:hover>.btn-file-input1 {
    background-color: #ffff00;
  }
</style>

Answer 1

您可以使用以下选项设置按钮字体大小：

button {
  font-size: 40px;
}

由于您的按钮具有已定义的高度和宽度，因此不应更改其尺寸。

Answer 2

为所有按钮添加其他课程。即使你有一些＆＃34;按钮＆＃34;这实际上不是按钮，而是输入类型=＆＃34;提交＆＃34;或输入type =＆＃34; button＆＃34 ;,将此类添加到所有这些内容中。然后在CSS中执行此操作：

.some_class_added_to_all_buttons{
  width: some-width;
  height: some-height;
  font-size: some-font-size;

}

如果您有一个已经有类的按钮，请添加一个类似

的按钮

 <button class="btn-file-input1 additional_class">Upload Documents</button>

增加HTML按钮字体大小而不更改按钮大小

2 个答案: