如何删除标签之间默认显示的所有空白
如何消除div标签之间的空白间隙，以及如何管理div标签之间的像素差异。我的html代码不正确对齐，如何对齐和删除div标签之间的空白。
我使用了此重置链接，但无法删除div标签之间的空白
这是我的CSS
* {
margin: 0px;
padding: 0px;
}
.phase-name {
display: inline-block;
width: 80px;
text-align: center;
padding: 7px;
vertical-align: top;
}
.type-container {
display: inline-block;
}
.type-abr {
width: 80px;
display: inline-block;
padding: 7px;
text-align: center;
}
.type-name {
width: 80px;
display: inline-block;
padding: 7px;
text-align: center;
}
.phase-container input {
max-width: 80%;
margin: auto;
}
.phase-container {
border: 1px solid #ddd;
font-family: Agency-Roman;
}
.week-container {
display: inline-block;
}
.week {
display: inline-block;
text-align: center;
}
.day {
display: inline-block;
padding: 7px;
}
/****** Header row 1********/
.phase-header-1 .phase-name {
background-color: #ddd;
padding: 7px;
border: 1px solid #ddd;
}
.phase-header-1 .type-container .type .week-container .week {
border: 1px solid #ddd;
width: 546px;
}
.phase-header-1 .type .type-abr {
background-color: #ddd;
/* padding:7px; */
border: 1px solid #ddd;
}
.phase-header-1 .type .type-name {
background-color: #ddd;
padding: 7px;
border: 1px solid #ddd;
}
.phase-header-1 .week {
display: inline-block;
background-color: yellow;
text-align: center;
padding: 7px;
}
/****** Header row 2********/
.phase-header-2 .phase-name {
background-color: black;
color: white;
}
.phase-header-2 .type-name {
background-color: black;
color: white;
margin-left: -1px;
}
.phase-header-2 .type-abr {
background-color: black;
color: white;
}
/*********/
.phase-header-2 .phase-name {
width: 80px;
text-align: center;
padding: 7px;
}
.phase-header-2 .type .type-abr {
width: 81px;
text-align: center;
padding: 7px;
margin-left: 0px;
border-color: black;
}
.phase-header-2 .type .type-name {
width: 80px;
text-align: center;
padding: 7px;
}
.phase-header-2 .type-container .type .week-container .week .day {
width: 106.60px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
background-color: yellow;
}
/****** Header row 3********/
/* width:43.42px; */
.phase-header-3 .week-container .week .day .reps {
width: 43.35px;
}
.phase-header-3 .week-container .week .day .percent1 {
width: 44px;
display: inline-block;
}
.phase-header-3 .week-container .week .day {
border: 1px solid #ddd;
background-color: yellow;
}
.phase-header-3 .type-container .type .week-container .week .day .reps {
display: inline-block;
}
.phase-header-3 .type-container .type .week-container .week .day .percent11 {
display: inline-block;
}
.phase-header-3 .type .type-abr {
background-color: #ddd;
border: 1px solid #ddd;
}
.phase-header-3 .type .type-name {
background-color: #ddd;
border: 1px solid #ddd;
}
.phase-header-3 .phase-name {
background-color: #ddd;
border: 1px solid #ddd;
width: 80px;
}
/****** Phase 1********/
.phase .type-container .day .reps {
display: inline-block;
}
.phase .type-container .day .percent1 {
display: inline-block;
}
.phase .week-container .week .day .reps {
display: inline-block;
width: 39px;
}
.phase .week-container .week .day .percent1 {
display: inline-block;
width: 39px;
}
.phase .week-container .day {
display: inline-block;
text-align: center;
background-color: #ddd;
width: 106.60px;
padding: 7px;
}
.phase-name {
size: 1px;
}
.phase .phase-name {
background-color: gray;
width: 80px;
}
.phase .type-name {
width: 80px;
}
.type-container .type .type-abr {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.type-container .type .type-name {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
<button class="week_button" value="">Weeks</button>
<button class="phase_button" value="">Phases</button>
<span class="paste_row_button"></span>
<div class="phases week_increase" style="overflow-x : auto; overflow-y:auto; position:relative;height: 600px;width: 100% ">
<div class="phase-container" style="display:inline-block;width:1000%">
<div class="phase-header-1">
<div class="phase-name"> </div>
<div class="type-container">
<div class="type">
<div class="type-abr"> </div>
<div class="type-name"> </div>
<div class="week-container">
<div class="week"> Week 1</div>
</div>
</div>
</div>
</div>
<div class="phase-header-2">
<div class="phase-name">PHASE</div>
<div class="type-container">
<div class="type">
<div class="type-abr">ABR.</div>
<div class="type-name">TYPE</div>
<div class="week-container">
<div class="week">
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
</div>
</div>
</div>
</div>
</div>
<div class="phase-header-3" style="display:inline-block">
<div class="phase-name"> </div>
<div class="type-container">
<div class="type">
<div class="type-abr"> </div>
<div class="type-name"> </div>
<div class="week-container">
<div class="week">
<div class="day">
<div class="reps">Reps</div>
<div class="percent1">%</div>
</div>
<div class="day">
<div class="reps">Reps</div>
<div class="percent1">%</div>
</div>
<div class="day">
<div class="reps">Reps</div>
<div class="percent1">%</div>
</div>
<div class="day">
<div class="reps">Reps</div>
<div class="percent1">%</div>
</div> /* there in between tags showing white space */
<div class="day">
<div class="reps">Reps</div>
<div class="percent1">%</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="structure phase hide">
<div class="phase-name">
<input type="text" name="phase-name" />
</div>
<div class="type-container">
<div class="type">
<div class="type-abr">
<input type="text" name="type-abr" />
</div>
<div class="type-name">
<input type="text" name="type-name" />
</div>
<div class="week-container">
<div class="week">
<div class="day">
<div class="reps">
<input type="text" name="day1-reps" data-id="1" types="reps_value" value="location" class="name" />
</div>
<div class="percent1">
<input type="text" name="day1-percent1" data-id="1" types1="reps_percent" value="location" />
</div>
</div>
<div class="day">
<div class="reps">
<input type="text" name="day1-reps" />
</div>
<div class="percent1">
<input type="text" name="day1-percent1" />
</div>
</div>
<div class="day">
<div class="reps">
<input type="text" name="day1-reps" />
</div>
<div class="percent1">
<input type="text" name="day1-percent1" />
</div>
</div>
<div class="day">
<div class="reps">
<input type="text" name="day1-reps" />
</div>
<div class="percent1">
<input type="text" name="day1-percent1" />
</div>
</div>
<div class="day">
<div class="reps">
<input type="text" name="day1-reps" />
</div>
<div class="percent1">
<input type="text" name="day1-percent1" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--jquery part-->
this is my jquery part
$(document).on('click', '.phase_button', function (e) {
e.preventDefault();
$('.paste_row_button').append('<button class="row_button">Rows-' + ++$(".row_button").length + '</button>');
$('.phase-container').append($(".structure").clone().removeClass("structure hide"));
});
$(document).on("click", ".row_button", function () {
$(".phase").eq($(".row_button").index($(this))).css({"display": "flex", "border-left": "1px solid #ddd", "border-right": "1px solid #ddd"}).find(".type-container").append($(".structure .type").clone());
});
$(document).on("click", ".week_button", function () {
console.log($(".phase-header-1 .week:first").clone());
$(".phase-header-1 .week-container").append($(".phase-header-1 .week:first").clone());
$(".phase-header-2 .week-container").append($(".phase-header-2 .week:first").clone());
$(".phase-header-3 .week-container").append($(".phase-header-3 .week:first").clone());
$(".phase").find(".week-container").append($(".structure .week:first").clone());
});
$(".phase_button").click();
这是我的图片，您可以在其中看到要删除的空白，当我添加此html结构时，其对齐方式不正确会显示如何解决此对齐问题并删除空白。
3 个答案:
答案 0 :(得分：1)
将float:left用于一个又一个的div。
或将引导程序列类用于网格-> https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
尝试一下。
工作码本示例：-> https://codepen.io/anon/pen/VEXKJe
$(document).on('click', '.phase_button', function (e) {
e.preventDefault();
$('.paste_row_button').append('<button class="row_button">Rows-' + ++$(".row_button").length + '</button>');
$('.phase-container').append($(".structure").clone().removeClass("structure hide"));
});
$(document).on("click", ".row_button", function () {
$(".phase").eq($(".row_button").index($(this))).css({"display": "flex", "border-left": "1px solid #ddd", "border-right": "1px solid #ddd"}).find(".type-container").append($(".structure .type").clone());
});
$(document).on("click", ".week_button", function () {
console.log($(".phase-header-1 .week:first").clone());
$(".phase-header-1 .week-container").append($(".phase-header-1 .week:first").clone());
$(".phase-header-2 .week-container").append($(".phase-header-2 .week:first").clone());
$(".phase-header-3 .week-container").append($(".phase-header-3 .week:first").clone());
$(".phase").find(".week-container").append($(".structure .week:first").clone());
});
$(".phase_button").click(); * {
margin: 0px;
padding: 0px;
}
.week .day{float:left;}
.week .day .reps{float:left;}
.phase-name {
display: inline-block;
width: 80px;
text-align: center;
padding: 7px;
vertical-align: top;
}
.type-container {
display: inline-block;
}
.type-abr {
width: 80px;
display: inline-block;
padding: 7px;
text-align: center;
}
.type-name {
width: 80px;
display: inline-block;
padding: 7px;
text-align: center;
}
.phase-container input {
max-width: 80%;
margin: auto;
}
.phase-container {
border: 1px solid #ddd;
font-family: Agency-Roman;
}
.week-container {
float:left;
display:flex;
}
.week {
display: inline-block;
text-align: center;
}
.day {
display: inline-block;
padding: 7px;width:107.3px;
}
/****** Header row 1********/
.phase-header-1 .phase-name {
background-color: #ddd;
padding: 7px;
border: 1px solid #ddd;
float:left;
}
.phase-header-1 .type-container .type .week-container .week {
border: 1px solid #ddd;
width: 600px;
}
.phase-header-1 .type .type-abr {
background-color: #ddd;
/* padding:7px; */
border: 1px solid #ddd;
}
.phase-header-1 .type .type-name {
background-color: #ddd;
padding: 7px;
border: 1px solid #ddd;
float:left;
}
.phase-header-1 .week {
display: inline-block;
background-color: yellow;
text-align: center;
padding: 7px;
}
/****** Header row 2********/
.phase-header-2 .phase-name {
background-color: black;
color: white;
}
.phase-header-2 .type-name {
background-color: black;
color: white;
margin-left: -1px;
}
.phase-header-2 .type-abr {
background-color: black;
color: white;
}
/*********/
.phase-header-2 .phase-name {
width: 85px;
text-align: center;
padding: 7px;
float:left;
}
.phase-header-2 .type .type-abr {
width: 81px;
text-align: center;
padding: 7px;
margin-left: 0px;
border-color: black;
float:left;
}
.phase-header-2 .type .type-name {
width: 80px;
text-align: center;
padding: 7px;
float:left;
}
.phase-header-2 .type-container .type .week-container .week .day {
width: 106.60px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
background-color: yellow;
}
/****** Header row 3********/
/* width:43.42px; */
.phase-header-3 .week-container .week .day .reps {
width: 43.35px;
}
.phase-header-3 .week-container .week .day .percent1 {
width: 44px;
display: inline-block;
}
.phase-header-3 .week-container .week .day {
border: 1px solid #ddd;
background-color: yellow;
}
.phase-header-3 .type-container .type .week-container .week .day .reps {
display: inline-block;
}
.phase-header-3 .type-container .type .week-container .week .day .percent11 {
display: inline-block;
}
.phase-header-3 .type .type-abr {
background-color: #ddd;
border: 1px solid #ddd;
}
.phase-header-3 .type .type-name {
background-color: #ddd;
border: 1px solid #ddd;
}
.phase-header-3 .phase-name {
background-color: #ddd;
border: 1px solid #ddd;
width: 80px;
float:left;
}
/****** Phase 1********/
.phase .type-container .day .reps {
display: inline-block;
}
.phase .type-container .day .percent1 {
display: inline-block;
}
.phase .week-container .week .day .reps {
display: inline-block;
width: 39px;
}
.phase .week-container .week .day .percent1 {
display: inline-block;
width: 39px;
}
.phase .week-container .day {
display: inline-block;
text-align: center;
background-color: #ddd;
width: 106.60px;
padding: 7px;
}
.phase-name {
size: 1px;
}
.phase .phase-name {
background-color: gray;
width: 80px;
}
.phase .type-name {
width: 80px;
}
.type-container .type .type-abr {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
float:left;
}
.type-container .type .type-name {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
float:left;
} <button class="week_button" value="">Weeks</button>
<button class="phase_button" value="">Phases</button>
<span class="paste_row_button"></span>
<div class="phases week_increase" style="overflow-x : auto; overflow-y:auto; position:relative;height: 600px;width: 100% ">
<div class="phase-container" style="display:inline-block;width:1000%">
<div class="phase-header-1">
<div class="phase-name"> </div>
<div class="type-container">
<div class="type">
<div class="type-abr"> </div>
<div class="type-name"> </div>
<div class="week-container">
<div class="week"> Week 1</div>
</div>
</div>
</div>
</div>
<div class="phase-header-2">
<div class="phase-name">PHASE</div>
<div class="type-container">
<div class="type">
<div class="type-abr">ABR.</div>
<div class="type-name">TYPE</div>
<div class="week-container">
<div class="week">
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
</div>
</div>
</div>
</div>
</div>
<div class="phase-header-3" style="display:inline-block">
<div class="phase-name"> </div>
<div class="type-container">
<div class="type">
<div class="type-abr"> </div>
<div class="type-name"> </div>
<div class="week-container">
<div class="week">
<div class="day">
<div class="reps">Reps</div>
<div class="percent1">%</div>
</div>
<div class="day">
<div class="reps">Reps</div>
<div class="percent1">%</div>
</div>
<div class="day">
<div class="reps">Reps</div>
<div class="percent1">%</div>
</div>
<div class="day">
<div class="reps">Reps</div>
<div class="percent1">%</div>
</div> /* there in between tags showing white space */
<div class="day">
<div class="reps">Reps</div>
<div class="percent1">%</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="structure phase hide">
<div class="phase-name">
<input type="text" name="phase-name" />
</div>
<div class="type-container">
<div class="type">
<div class="type-abr">
<input type="text" name="type-abr" />
</div>
<div class="type-name">
<input type="text" name="type-name" />
</div>
<div class="week-container">
<div class="week">
<div class="day">
<div class="reps">
<input type="text" name="day1-reps" data-id="1" types="reps_value" value="location" class="name" />
</div>
<div class="percent1">
<input type="text" name="day1-percent1" data-id="1" types1="reps_percent" value="location" />
</div>
</div>
<div class="day">
<div class="reps">
<input type="text" name="day1-reps" />
</div>
<div class="percent1">
<input type="text" name="day1-percent1" />
</div>
</div>
<div class="day">
<div class="reps">
<input type="text" name="day1-reps" />
</div>
<div class="percent1">
<input type="text" name="day1-percent1" />
</div>
</div>
<div class="day">
<div class="reps">
<input type="text" name="day1-reps" />
</div>
<div class="percent1">
<input type="text" name="day1-percent1" />
</div>
</div>
<div class="day">
<div class="reps">
<input type="text" name="day1-reps" />
</div>
<div class="percent1">
<input type="text" name="day1-percent1" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
希望有帮助。
答案 1 :(得分：0)
您使用DIV而不是表格的任何特殊原因是什么？ 用桌子很容易做到这一点。这是我使用tablesgenerator.com非常迅速地汇集在一起的。显然，您将需要更多地编辑单元格的样式/宽度。
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-c82p{background-color:#fffe65;border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-4f0n{background-color:#000000;color:#ffffff;border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-dx7k{background-color:#656565;border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-llyw{background-color:#c0c0c0;border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
</style>
<table class="tg">
<tr>
<th class="tg-llyw" colspan="2"></th>
<th class="tg-llyw" colspan="2"></th>
<th class="tg-llyw" colspan="2"></th>
<th class="tg-c82p" colspan="10">Week 1</th>
<th class="tg-c82p" colspan="4">Week 2</th>
</tr>
<tr>
<td class="tg-4f0n" colspan="2">PHASE</td>
<td class="tg-4f0n" colspan="2">ABR</td>
<td class="tg-4f0n" colspan="2">TYPE</td>
<td class="tg-c82p" colspan="2">1</td>
<td class="tg-c82p" colspan="2">2</td>
<td class="tg-c82p" colspan="2">3</td>
<td class="tg-c82p" colspan="2">4</td>
<td class="tg-c82p" colspan="2">5</td>
<td class="tg-c82p" colspan="2">1</td>
<td class="tg-c82p" colspan="2">2</td>
</tr>
<tr>
<td class="tg-llyw" colspan="2"></td>
<td class="tg-llyw" colspan="2"></td>
<td class="tg-llyw" colspan="2"></td>
<td class="tg-c82p">Reps</td>
<td class="tg-c82p">%</td>
<td class="tg-c82p">Reps</td>
<td class="tg-c82p">%</td>
<td class="tg-c82p">Reps</td>
<td class="tg-c82p">%</td>
<td class="tg-c82p">Reps</td>
<td class="tg-c82p">%</td>
<td class="tg-c82p">Reps</td>
<td class="tg-c82p">%</td>
<td class="tg-c82p">Reps</td>
<td class="tg-c82p">%</td>
<td class="tg-c82p">Reps</td>
<td class="tg-c82p">%</td>
</tr>
<tr>
<td class="tg-dx7k" colspan="2">Text box</td>
<td class="tg-c3ow" colspan="2">Text Box</td>
<td class="tg-c3ow" colspan="2">Text Box</td>
<td class="tg-0pky">location</td>
<td class="tg-0pky">location</td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
</tr>
<tr>
<td class="tg-dx7k" colspan="2"></td>
<td class="tg-c3ow" colspan="2">Text Box</td>
<td class="tg-c3ow" colspan="2">Text Box</td>
<td class="tg-0pky">location</td>
<td class="tg-0pky">location</td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
</tr>
<tr>
<td class="tg-dx7k" colspan="2">Text Box</td>
<td class="tg-c3ow" colspan="2">Text Box</td>
<td class="tg-c3ow" colspan="2">Text Box</td>
<td class="tg-0pky">location</td>
<td class="tg-0pky">location</td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
</tr>
<tr>
<td class="tg-dx7k" colspan="2">Text Box</td>
<td class="tg-c3ow" colspan="2">Text Box</td>
<td class="tg-c3ow" colspan="2">Text Box</td>
<td class="tg-0pky">location</td>
<td class="tg-0pky">location</td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
</tr>
<tr>
<td class="tg-dx7k" colspan="2"></td>
<td class="tg-c3ow" colspan="2">Text Box</td>
<td class="tg-c3ow" colspan="2">Text Box</td>
<td class="tg-0pky">location</td>
<td class="tg-0pky">location</td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
</tr>
</table>
答案 2 :(得分：0)
尝试将必要的-8px类的左/右边距减少CSS，例如：
.day {
display: inline-block;
padding: 7px;
margin-left: -8px;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？