使 html 元素彼此靠近答案

【问题标题】：To make html elements closer to each other使 html 元素彼此靠近
【发布时间】：2019-06-23 20:48:49
【问题描述】：

我为具有多个 html 元素的用户准备了这个长表单。我使用了Materialize 框架。这是可折叠的link。

表格太长了。

如何删除元素之间的一些空间并使其全部变窄，这样我就不需要向下滚动了？

我没有在框架选项中找到它。

这是元素的 html 代码：

<div class="container">

  <div class="row">
    <div class="input-field col s12">
      <i class="material-icons prefix">add</i>
      <input id="stat" type="text" class="validate">
      <label for="stat">Добавить новую статистику</label>
    </div>
  </div>

  <div class="row">
    <div class="input-field col s12">
      <i class="material-icons prefix">assignment</i>
      <input id="des" type="text" class="validate">
      <label for="des">Добавить описание статистики</label>
    </div>
  </div>

  <div class="row">
    <div class="input-field col s1">
      <i class="material-icons prefix">trending_down</i>
    </div>
    <div class="input-field col s8">
      <h6>
        Добавить минимальное значение
      </h6>
    </div>
    <div class="input-field col s3">
      <input id="des" type="text" class="validate">
    </div>
  </div>

  <div class="row">
    <div class="input-field col s1">
      <i class="material-icons prefix">trending_up</i>
    </div>
    <div class="input-field col s8">
      <h6>
        Добавить максимальное значение
      </h6>
    </div>
    <div class="input-field col s3">
      <input id="des" type="text" class="validate">
    </div>
  </div>

  <a class="waves-effect waves-light btn-small #039be5 light-blue darken-1" id="btn"><i class="material-icons right">send</i>Добавить</a>
  <p> </p>
  <ul class="collapsible">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>Добавить данные в статистики:</div>
      <div class="collapsible-body">
        <span>
      
   <div class="row">   
   <div class="input-field col s1">
   <p>
  <i class="material-icons prefix">wb_sunny</i>
  </p>
   </div>   
   <div class="input-field col s7">  
  <select class="icons browser-default" id="weeksSel2" onChange ="getWeekText2();">  
  <option value="" disabled selected>Выберите неделю</option>
  </select>
  </div> 
  </div>          
      
    </span>
      </div>
    </li>
  </ul>

</div>
<!-- end of container -->

【问题讨论】：

我建议使用线条样式减少/删除填充和边距。如果您的内联样式被覆盖，请尝试将 !important 添加到您的样式中，以免它们被覆盖。
这是边距和填充问题。在您使用“！important”之前，请确保您的覆盖样式包含在框架样式之后......您不需要！important，因为css与后进先出一起使用
各位，谢谢。如何覆盖框架样式，你通常为此做什么？

标签： html css google-sheets materialize

【解决方案1】：

我对materializecss不太了解，但我发现有人面临同样的问题，看看这可能会对你有所帮助。

根据以下链接，您需要将所有 col 元素合并到单个 row 中。

Spacing Between Rows with Materialize CSS

【讨论】：

【解决方案2】：

您可能希望从.row 中删除margin-bottom。

<div class="row">

使用row 类向您的 div 添加另一个类，例如custom-row

<div class="row custom-row">

并添加样式：

.custom-row {
  margin-bottom: 0 !important; /*this will override margin-bottom:10px from '.row'
}

这将保留.row 中的所有样式，但会覆盖margin-bottom

希望对你有帮助！

【讨论】：