Question

我为有几个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 -->

Answer 1

我对物化的掌握并不多，但是我发现有人也面临着同样的问题，请看一下这可能会对您有所帮助。

按照下面的链接，您需要将所有col元素合并到单个row中。

Spacing Between Rows with Materialize CSS

Answer 2

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

<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

希望有帮助！

使html元素彼此靠近

2 个答案: