Question

我有一个div 容器。在此div之间我有另一个div名为模型，并且有一个input 文件类型。现在当我在我的 mozilla firefox 浏览器中打开它时，一切看起来都不错。问题是当我点击Browse...然后它没有打开上传文件时，但是当我点击Browse...字段之外时，它会打开以上传文件。这是我的html文件

＆＃13;

 input{
          margin-bottom: 15px;
          padding: 10px;
          width: 100%;
          box-sizing: border-box;
          border-radius: 5px;
          height: 50px;
          border:0px; 
          font-family: georgia;
          font-size: 12pt;
          text-align: center;
        }

＆＃13;

 <div class="container">
    <div class="model">
        <form>
          <div>
            <label>Profile Picture</label>
            <input type="file" name="img">
          </div>
        </form>
     </div>
</div>

＆＃13;

我谷歌但没有找到任何有助于解决这个问题的好资源。请取消。谢谢！

Answer 1

您需要稍微更改CSS代码。试试这个。

 input {
   margin-bottom: 15px;
   margin-top: 15px;
   box-sizing: border-box;
   border-radius: 5px;
   height: 50px;
   border: 0px;
   font-family: georgia;
   font-size: 12pt;
   display: block;
 }

Answer 2

作为调试按钮区域的一种方法，您可以使用outline属性。您设置width: 100%，因此它将整行作为一个块。

添加outline属性，您可能会看到它。

＆＃13;

 input{
          margin-bottom: 15px;
          width: 85px;
          box-sizing: border-box;
          border-radius: 5px;
          height: 40px;
          border:0px; 
          font-family: georgia;
          font-size: 12pt;
          text-align: center;
          outline: 1px solid #FF0000;
        }

＆＃13;

 <div class="container">
    <div class="model">
        <form>
          <div>
            <label>Profile Picture</label>
            <input type="file" name="img">
          </div>
        </form>
     </div>
</div>

＆＃13;

在div中定位输入

2 个答案: