时间戳

首页 > 解决方案 > 使 html 元素彼此靠近

html - 使 html 元素彼此靠近

问题描述

对于具有多个 html 元素的用户，我有这个长表单。我为此使用了Materialise框架。这是可折叠的链接。

表格太长了。

如何删除元素之间的一些空间并使其变窄所以我不需要向下滚动？

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

这是元素的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 -->

在此处输入图像描述

标签： htmlcssgoogle-sheetsmaterialize

解决方案

您可能想要margin-bottom从.row.

<div class="row">

使用 class 将另一个类添加到您的 div 中row，例如custom-row

<div class="row custom-row">

并添加样式：

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

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

希望能帮助到你！

推荐阅读