Question

我创建了一个按钮来上传带有图标的文件，以便屏蔽输入文本框并只有一个按钮。问题是我的按钮占用了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;
}

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

Answer 1

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

Answer 2

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

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

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

减少CSS中的上传按钮大小

2 个答案: