Question

在一个表单组中，我有两个元素，一个是标签，另一个是按钮，但我在按钮和标签之间获得了额外的空格。看到这个小提琴。 myFiddle

我想删除DocumentType和附加文件之间的空格

<div class="panel">
  <div class="panel panel-info">
        <h3> panel heading</h3>
  </div>
  <div class="panel panel-body">

    <div class="row">
      <div class="col-md-3">
        <div class="form-group">
          <label class="form-control">Document Type</label>
          <label class="fileUpload">
            <input id="documentattachment" name="documentattachment" multiple type="file" /> Attach a file
          </label>
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          <select class="form-control">
            <option>One</option>
            <option>Two</option>
            <option>Three</option>
          </select>
          <div id="submitButton">
            <button data-bind="click: submitFile" class="form-control">Send</button>
          </div>
        </div>
      </div>
      <div class="col-md-6">

      </div>
    </div>
  </div>
</div>

由于

Answer 1

删除margin上的label＆amp;同时删除此fileUpload

label{margin-bottom:0;}

.fileUpload {
  -webkit-appearance: none;
  width: 100%;
  text-align: center;
  border: 2px solid #AAA;
  border-radius: 4px;
  padding: 2px 5px;
  /*margin: 2px;*/
  background: #f2f2f2;
  display: inline-block;
  color: rgba(171, 68, 70, 1);
}

https://jsfiddle.net/yx58b5uL/5/

Answer 2

来自bootstrap的margin-bottom标签。使用：

label.form-control {
  margin-bottom: 0px;
}

然后你去。请告诉我您对此的反馈。谢谢！

＆＃13;

.fileUpload input[type="file"] {
  position: fixed;
  top: -1000px;
}
.fileUpload {
  -webkit-appearance: none;
  width: 100%;
  text-align: center;
  border: 2px solid #AAA;
  border-radius: 4px;
  padding: 2px 5px;
  margin: 2px;
  background: #f2f2f2;
  display: inline-block;
  color: rgba(171, 68, 70, 1);
}
.fileUpload:hover {
  background: #CCC;
}
.fileUpload:active {
  background: #CCF;
}
.fileUpload:invalid + span {
  color: rgba(171, 68, 70, 1);
}
.fileUpload:valid + span {
  color: rgba(171, 68, 70, 1);
}
label.form-control {
  margin-bottom: 0px;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css"/>
<div class="panel">
  <div class="panel panel-info">
    <h3>
    panel heading
  </h3>
  </div>
  <div class="panel panel-body">

    <div class="row">
      <div class="col-md-3">
        <div class="form-group">
          <label class="form-control">Document Type</label>
          <label class="fileUpload">
            <input id="documentattachment" name="documentattachment" multiple type="file" />Attach a file
          </label>
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          <select class="form-control">
            <option>One</option>
            <option>Two</option>
            <option>Three</option>
          </select>
          <div id="submitButton">
            <button data-bind="click: submitFile" class="form-control">Send</button>
          </div>
        </div>
      </div>
      <div class="col-md-6">

      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

默认情况下，引导程序CSS是标签，因此您需要删除它。

working demo

 label{margin-bottom:0}

Answer 4

你可以用CSS做到这一点。在＆＃34;文档类型＆＃34;中添加ID或类;标签，并将边距设置为0.

CSS：

Field: Name Of The Field

HTML：

    .fileUpload input[type="file"] {
  position: fixed;
  top: -1000px;
}

.fileUpload {
  -webkit-appearance: none;
  width: 100%;
  text-align: center;
  border: 2px solid #AAA;
  border-radius: 4px;
  padding: 2px 5px;
  margin: 2px;
  background: #f2f2f2;
  display: inline-block;
  color: rgba(171, 68, 70, 1);
}

.fileUpload:hover {
  background: #CCC;
}

.fileUpload:active {
  background: #CCF;
}

.fileUpload:invalid + span {
  color: rgba(171, 68, 70, 1);
}

.fileUpload:valid + span {
  color: rgba(171, 68, 70, 1);
}

#noSpace {
  margin: 0;
}

您可以在此处看到指向小提琴的链接：https://jsfiddle.net/john_h/yx58b5uL/6/

Answer 5

试试这个：

label {
    display: inline-block;
    margin:0px;
    padding:0px;
    }

https://jsfiddle.net/maky/yx58b5uL/9/

在boostrap css中删除div之后的额外空格

5 个答案: