减少 CSS 中的上传按钮大小答案

【问题标题】：Reduce upload button size in CSS减少 CSS 中的上传按钮大小
【发布时间】：2016-06-06 07:42:57
【问题描述】：

我创建了一个按钮来上传带有图标的文件，以便屏蔽输入文本框并且只有一个按钮。问题是我的按钮占据了 div 的所有宽度。我希望两个按钮并排。但是，当我修改 .btn 文件时，选择对话框被破坏了，所以它没有出现。这是 div：

<div id="mydiv">
  A text <br>
  An other text
  <form id="test">
    <span class="btn btn-block btn-file">
      <i class="glyphicon glyphicon-export"></i>
      <input type="file" name="file" id="exampleInputFile" file-model="customer.file" on-file-change="Submit">
    </span>
  </form>
  <span class="glyphicon glyphicon-envelope"></span>
</div>

这就是 CSS：

.btn-file {
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 100px;
  text-align: left;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  cursor: inherit;
  display: block;
}

你能帮我对齐两个按钮并减小上传按钮的大小吗？谢谢。

【问题讨论】：

您可以在单击图标后附加输入元素，然后将单击传递给输入:)
你想显示什么图标？

标签： javascript html css input imagebutton

【解决方案1】：

您只需要内联到包含文件上传按钮的跨度。

我在这里修改了你的演示 - https://plnkr.co/edit/cYpho3SPeRV4NqqGOuHw?p=preview

.btn-file {
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 100px;
  text-align: left;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  cursor: inherit;
  display: block;
}

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link href="style.css" rel="stylesheet" />
  </head>

  <body>
    <div id="mydiv">
      A text <br>
      An other text
      <form id="test">
        <span class="btn btn-block btn-file" style="display:inline">
          <i class="glyphicon glyphicon-export"></i>
          <input type="file" name="file" id="exampleInputFile" file-model="customer.file" on-file-change="Submit">
        </span>
        <span class="glyphicon glyphicon-envelope"></span>
      </form>
      
    </div>
  </body>

</html>

【讨论】：

【解决方案2】：

您在外部跨度上有 btn-block 类 - 这使它以块模式显示，因此它占用了所有可用宽度。如果您不想要这种行为，请删除该类。

【讨论】：

谢谢它的工作，我怎样才能减少表单的宽度？它占用所有宽度页面，如果我将它包装在一个 div 中并设置一个 max-width: 40px;例如，它不起作用。