在 CSS 中减小上传按钮大小

Question

我创建了一个按钮来上传一个带有图标的文件，以便屏蔽输入文本框并且只有一个按钮。问题是我的按钮占据了 div 的所有宽度。我希望这两个按钮并排。但是，当我修改 .btn 文件时，select 对话框被破坏，因此它没有出现。这是 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;
}

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

Answer 1

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

Answer 2

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

我在这里修改了你的演示 - 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>

在 CSS 中减小上传按钮大小

Reduce upload button size in CSS

html

javascript

css

input

imagebutton