我为用户准备了这个长表单,里面有几个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 -->
发布于 2019-06-24 04:58:25
我不是很了解物质,但我发现了一些人面临的同样的问题,看看这可能会对你有所帮助。
根据下面的链接,您需要合并单个row
中的所有col
元素。
发布于 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
希望它能帮上忙!
https://stackoverflow.com/questions/56727625
复制相似问题