如何只能让一个CSS元素出现在一个页面上？ [英] How to only make a css element appear on one page?

查看：352
本文介绍了如何只能让一个CSS元素出现在一个页面上？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是新来的CSS和SCSS。我的问题似乎很简单解决，但我不知道从哪里开始。

我有三个页面，他们各自有类似于这样的表：

在其他网页我想要的盒子（左）走了，但我想用相同的CSS样式表。以下是其他网页的表的样子的：

我想在右边的空间消失，这个词第二对准一路向左。

下面是我的SCSS：

 部分{
  @include网格行（）;
}
段P {
  @include网格柱（12）;
  字体家庭：$字体堆栈;
  字体大小：23px;
  填充：0;
  保证金：0;
 }
.button {
  字体家庭：$字体堆栈;
  颜色：#FFF;
  背景色：$次要色;
  高度：27px;
  文本对齐：中心;
  边界半径：7px的;
  保证金：6px 0 5px的0;
  填充：5px的7px的5像素7px的;
}
.button：悬停{
  背景色：$原色;
}
表 {
  @include网格柱（12）;
  填充：0;
  左边框：无;
  右边框：无;
  文本对齐：右;
  边界崩溃：独立;
  边框间距：0 2px的;
}
表 {
  TR {
    背景：#FFF;
  }
  TR：悬停{
    背景：＃EBF7FC;
  }
  TR TD {
    填充：6px 8像素;
  }
  TR TD：第一孩子{
    左边框：3PX固体#FFF;
  }
  TR TD：最后一个孩子{
    右边框：3PX固体#FFF;
  }
  TR：悬停TD：第一孩子{
    左边框：3PX固体$次要色;
  }
  TR：悬停TD：最后一个孩子{
    右边框：3PX固体$次要色;
  }
}
。状态 {
  颜色：#FFF;
  宽度：33px;
  填充：5px的0;
  文本对齐：中心;
}
.statusRunning {
  背景颜色：＃5AD427;
  @extend .STATUS;
}
  .statusQueued {
  背景颜色：＃A4E786;
  @extend .STATUS;
}
  .statusIncomplete {
  背景颜色：＃FFCC00;
  @extend .STATUS;
}
.statusBlank {
  宽度：1px的;
}
表TR TD：第n个孩子（2）{
  文本对齐：左;
}
.tightcell一个{
 保证金右：25像素;
 颜色：$次要色;
}

下面是我的HTML不工作的页面：

 ＆lt;节＆GT;
＆其中p为H.;试验编号6≤/差异无显着
  ＆LT;表＆gt;
    ＆LT; TBODY＆GT;
      ＆其中; TR＆GT;
        ＆LT; TD类=statusBlank＆GT;＆LT; / TD＆GT;
        ＆LT; TD＆gt;第二个＆LT; / TD＆GT;
        ＆其中; TD＆GT; 0000-00-00 00：00：00＆其中; / TD＆GT;
        ＆所述; TD类=tightcell＆GT;＆所述; A HREF =＃＆GT;下载及所述; / a取代;
      ＆LT; / TR＆GT;
      ＆其中; TR＆GT;
        ＆LT; TD类=statusBlank＆GT;＆LT; / TD＆GT;
        ＆LT; TD＆gt;第二个＆LT; / TD＆GT;
        ＆其中; TD＆GT; 0000-00-00 00：00：00＆其中; / TD＆GT;
        ＆所述; TD类=tightcell＆GT;＆所述; A HREF =＃＆GT;下载及所述; / a取代;
      ＆LT; / TR＆GT;
      ＆其中; TR＆GT;
        ＆LT; TD类=statusBlank＆GT;＆LT; / TD＆GT;
        ＆LT; TD＆gt;第二个＆LT; / TD＆GT;
        ＆其中; TD＆GT; 0000-00-00 00：00：00＆其中; / TD＆GT;
        ＆所述; TD类=tightcell＆GT;＆所述; A HREF =＃＆GT;下载及所述; / a取代;
      ＆LT; / TR＆GT;
      ＆其中; TR＆GT;
        ＆LT; TD类=statusBlank＆GT;＆LT; / TD＆GT;
        ＆LT; TD＆gt;第二个＆LT; / TD＆GT;
        ＆其中; TD＆GT; 0000-00-00 00：00：00＆其中; / TD＆GT;
        ＆所述; TD类=tightcell＆GT;＆所述; A HREF =＃＆GT;下载及所述; / a取代;
      ＆LT; / TR＆GT;
    ＆LT; / TBODY＆GT;
  ＆LT; /表＆gt;

  ＆LT; P＆GT;最终项目＆LT; / P＆GT;
  ＆LT;表＆gt;
    ＆LT; TBODY＆GT;
      ＆其中; TR＆GT;
        ＆LT; TD类=statusBlank＆GT;＆LT; / TD＆GT;
        ＆LT; TD＆gt;第二个＆LT; / TD＆GT;
        ＆其中; TD＆GT; 0000-00-00 00：00：00＆其中; / TD＆GT;
        ＆所述; TD类=tightcell＆GT;＆所述; A HREF =＃＆GT;下载及所述; / a取代;
      ＆LT; / TR＆GT;
      ＆其中; TR＆GT;
        ＆LT; TD类=statusBlank＆GT;＆LT; / TD＆GT;
        ＆LT; TD＆gt;第二个＆LT; / TD＆GT;
        ＆其中; TD＆GT; 0000-00-00 00：00：00＆其中; / TD＆GT;
        ＆所述; TD类=tightcell＆GT;＆所述; A HREF =＃＆GT;下载及所述; / a取代;
      ＆LT; / TR＆GT;
    ＆LT; / TBODY＆GT;
  ＆LT; /表＆gt;
＆LT; /节＆gt;

解决方案

这个问题来源于此：

  TR TD {
    填充：6px 8像素;
  }

不管你有多小尽量让你的细胞，它会一直占用至少16像素的空间。最好的选择是只没有空单元格您的标记在所有的，如果他们不提供一个实际的目的。

另外，你可以杀死填充：

  .statusBlank {
     填充：0;
}

I'm new to CSS and SCSS. My issue seems very simple to fix but I'm not sure where to start.

I have three pages and they each have a table that look similar to this:

On the other pages I want the boxes (on the left) to go away, but I want to use the same CSS style sheet. Here is what the one of the other page's table look like:

I want the space on the right to go away and the word second to align all the way to the left.

Here is my scss:

section {
  @include grid-row();
}
section p {
  @include grid-column(12);
  font-family: $font-stack;
  font-size: 23px;
  padding: 0;
  margin: 0;
 }
.button {
  font-family: $font-stack;
  color: #fff;
  background-color: $secondary-color;
  height: 27px;
  text-align: center;
  border-radius: 7px;
  margin: 6px 0 5px 0;
  padding: 5px 7px 5px 7px;
}
.button:hover {
  background-color: $primary-color;
}
table {
  @include grid-column(12);
  padding: 0;
  border-left: none;
  border-right: none;
  text-align:right;      
  border-collapse:separate;
  border-spacing: 0 2px;
}
table {
  tr {
    background: #fff;
  }
  tr:hover {
    background: #EBF7FC;
  }
  tr td {
    padding:6px 8px;
  }
  tr td:first-child {
    border-left: 3px solid #fff;
  }
  tr td:last-child {
    border-right:3px solid #fff;
  } 
  tr:hover td:first-child {
    border-left: 3px solid $secondary-color;
  }
  tr:hover td:last-child {
    border-right:3px solid $secondary-color;
  } 
}
.status {
  color:#fff;
  width: 33px;
  padding: 5px 0;
  text-align: center;
}
.statusRunning {
  background-color: #5AD427;
  @extend .status;
}
  .statusQueued {
  background-color: #A4E786;
  @extend .status;
}
  .statusIncomplete {
  background-color: #FFCC00;
  @extend .status;
}
.statusBlank { 
  width: 1px;
}
table tr td:nth-child(2) {
  text-align:left; 
}
.tightcell a {
 margin-right:25px;
 color: $secondary-color;
}

Here is my HTML for the page that is not working:

<section>
<p>Test Number 6 </p>
  <table>
    <tbody>
      <tr>
        <td class="statusBlank"></td>
        <td>second</td>
        <td>0000-00-00 00:00:00</td>
        <td class="tightcell"><a href="#">Download</a>
      </tr>
      <tr>
        <td class="statusBlank"></td>
        <td>second</td>
        <td>0000-00-00 00:00:00</td>
        <td class="tightcell"><a href="#">Download</a>
      </tr>
      <tr>
        <td class="statusBlank"></td>
        <td>second</td>
        <td>0000-00-00 00:00:00</td>
        <td class="tightcell"><a href="#">Download</a>
      </tr>
      <tr>
        <td class="statusBlank"></td>
        <td>second</td>
        <td>0000-00-00 00:00:00</td>
        <td class="tightcell"><a href="#">Download</a>
      </tr>
    </tbody>
  </table>

  <p>Final Project </p>
  <table>
    <tbody>
      <tr>
        <td class="statusBlank"></td>
        <td>second</td>
        <td>0000-00-00 00:00:00</td>
        <td class="tightcell"><a href="#">Download</a>
      </tr>
      <tr>
        <td class="statusBlank"></td>
        <td>second</td>
        <td>0000-00-00 00:00:00</td>
        <td class="tightcell"><a href="#">Download</a>
      </tr>
    </tbody>
  </table>
</section>

解决方案

The problem comes from this:

  tr td {
    padding:6px 8px;
  }

No matter how small you try to make your cell, it will always take up at least 16px of space. Your best option is to just not have the empty cells in your markup at all if they're not serving an actual purpose.

Alternately, you could kill the padding:

.statusBlank {
     padding: 0;
}

这篇关于如何只能让一个CSS元素出现在一个页面上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆