首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使html元素彼此更接近

使html元素彼此更接近
EN

Stack Overflow用户
提问于 2019-06-24 04:48:49
回答 2查看 765关注 0票数 0

我为用户准备了这个长表单,里面有几个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 -->

EN

回答 2

Stack Overflow用户

发布于 2019-06-24 04:58:25

我不是很了解物质,但我发现了一些人面临的同样的问题,看看这可能会对你有所帮助。

根据下面的链接,您需要合并单个row中的所有col元素。

Spacing Between Rows with Materialize CSS

票数 1
EN

Stack Overflow用户

发布于 2019-06-24 09:03:22

您可能希望从.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

希望它能帮上忙!

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56727625

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档