jquery - 如何删除默认情况下显示在标签之间的所有空白

标签 jquery html css

如何删除 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">&nbsp;</div>
      <div class="type-container">
        <div class="type">
          <div class="type-abr">&nbsp;</div>
          <div class="type-name">&nbsp;</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">&nbsp;</div>
      <div class="type-container">
        <div class="type">
          <div class="type-abr">&nbsp;</div>
          <div class="type-name">&nbsp;</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 结构时，它的对齐不正确显示了如何解决此对齐问题并删除空白。

enter image description here

最佳答案

您使用 DIV 而不是表格的任何特殊原因？ 这可以用一张 table 很容易地完成。这是我使用 tablegenerator.com 非常快速地组合在一起的东西。您显然需要更多地编辑单元格的样式/宽度。

Picture of table I made 

<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>

关于jquery - 如何删除默认情况下显示在标签之间的所有空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52867123/

上一篇：css - 如何为 body 和 png 图像设置相同的背景图像？

下一篇：javascript - mouseleave 事件在 vue.js 中延迟触发

相关文章：

javascript - 鼠标离开窗口提醒弹出--Moodle

javascript - 解决 typescript 错误的最佳方法 - 类型上不存在属性

javascript - 使用jquery加载外部php文件？

html - SVG 更改其容器的大小(扩展)。如何预防？

jquery - 专注于小 div 内表格的 <the> 内容

使用 CSS 转义的具有数字 id 的元素的 jQuery 选择器

jquery - Select2 下拉删除所需的边框颜色？

php - jquery函数中的变量为null

ios - Ionic 标签栏与主页按钮重叠(iPhone X - iOS 11)

javascript - 所有页面链接都无法点击？

©2024 IT工具网  联系我们