忽略内联样式 HTML CSS

Posted 2023-03-05

【中文标题】忽略内联样式 HTML CSS

【英文标题】：Ignore inline styles HTML CSS

【发布时间】：2020-11-26 16:08:48

【问题描述】：

我有一个问题，这是我的错，但我正在努力解决这个问题......

我正在为电子商务建立一个网站，当您进入产品页面时，在底部，我有所有产品的描述/规格，并且它们都不同（我有超过 3000 种产品），一些产品没有 2 列，其他列...顺便说一句，跳到问题

我创建了一个表，但是我放错了 td style="width:50%"> 我完成了 PC 和平板版本，一切都很好...但是对于移动设备，我使用显示块，因为我只想要 1 列...但我想要宽度：100%...

---

我试过#vpc1 td width:100% !important; min-width:100% !important;，还有代码#vpc td[style]... 我用边框和背景进行了测试，工作正常，但宽度没有改变...

<table id="tablevpc1">
<tbody>
<tr>
<td style="width: 50%;">
<ul id="ulvpc">
<li><strong style="font-size: 20px;">Inovadores Sensores VPC Ativos DataCAN</strong></li>
<li>VPC TM comunica&ccedil;&atilde;o pelos cabos de tens&atilde;o do ve&iacute;culo, tecnologicamente revolucionarios, eliminando a necessidade de passar cabos at&eacute; &agrave; unidade de controle do sistema. Utiliza os cabos existentes no ve&iacute;culo, para enviar sinais digitais dos novos sensores digitais activos atrav&eacute;s da patenteada tecnologia DataCAN TM ao mostrador de LED no interior do habit&aacute;culo. Esta versatilidade oferece a melhor e &uacute;nica solu&ccedil;&atilde;o para aplica&ccedil;&atilde;o em ve&iacute;culos de passageiros, cami&otilde;es com e sem atrelado, autocarros, camionetas, autocaravanas, ve&iacute;culos com rulote, equipamentos agr&iacute;colas.</li>
</ul>
</td>
<td style="width: 50%;">
<ul id="ulvpc2">
<li><strong>3E-VPC3048DL</strong> Kit dianteiro 4 sensores VPC em forma de L com mostrador</li>
<li><strong>3E-VPC3048BL</strong> Kit dianteiro 4 sensores VPC em forma de L com buzzer</li>
<li><strong>3E-VPC3047BS</strong> Kit traseiro 4 sensores VPC direitos com bessouro</li>
<li><strong>3E-VPC3047BL</strong> Kit traseiro 4 sensores VPC em L com bessouro</li>
<li><strong>3E-VPC3047DS</strong> Kit traseiro 4 sensores VPC direitos com mostrador</li>
<li><strong>3E-VPC3047DL</strong> Kit traseiro 4 sensores VPC em L com mostrador</li>
<li><strong>3E-VPC304P2L</strong> Kit traseiro 4 sensores VPC em L aplicado como segundo<br /> sistema num ve&iacute;culo como a vref. VPC3047 ex. uso na rulote</li>
</ul>
</td>
</tr>
</tbody>
</table>


<!-- **THE STYLE I'M TRYING TO USE:** -->
@media (max-width: 768px) 


#tablevpc1 
  border: 0;
  min-width:99% !important!; 


#tablevpc1 tr 
  margin-bottom: 10px;    
  min-width:99% !important!; 
  display: block;


#tablevpc1 td
  min-width:99% !important!; 
  display: block;
  text-align: left;
  font-size: 13px;




#tablevpc2 
  border: 0;
  min-width:99% !important!; 
 

#tablevpc2 tr
  min-width:99% !important!; 
  margin-bottom: 10px;
  display: block;


#tablevpc2 td
  min-width:99% !important!; 
  display: block;
  text-align: left;
  font-size: 13px;

【问题讨论】：

如果某个答案解决了您的问题，请考虑接受该答案。以下是meta.stackexchange.com/questions/5234/… 然后返回此处并对勾号/复选标记执行相同操作直到它变为绿色的方法。这通知社区，找到了解决方案。否则，其他人可能会认为问题仍然悬而未决，可能想要发布（更多）答案。您将获得积分，并鼓励其他人帮助您。 欢迎来到 Stack！

【参考方案1】：

尝试将 display: block 设置为 td 并小心 - id="tablevpc1"，但在您的 CSS 中是 #vpc1 td...

#tablevpc1 td width: 100% !important; display: block;

【讨论】：

您告诉要小心的错误ID，它只是写在那里，在代码中一切正常。我已经尝试过了，检查我的 TD #tablevpc1 td width:100% !important!;显示：块；文本对齐：左； font-size: 13px; 注意：我尝试 width 100%，尝试 min-width，什么都没有

更新：我尝试其他的东西，只是为了尝试，显示：未设置...结果就是我想要的。我不知道这个“display:unset”，在这种情况下可以安全使用吗？

@BrunoSantos: display: unset 不存在，它被忽略并使用最后一个已知的display 值。

【参考方案2】：

在构建过程中，请一开始就做好。人们使用手机上网 - 目前的方法是移动优先，有时唯一关心的是如何填满大屏幕；) 你不需要桌子，我会这样做：

<section><h1>Inovadores Sensores VPC Ativos DataCAN</h1>
<p>VPC TM comunicação pelos cabos de tensão do veículo, tecnologicamente revolucionarios, eliminando a necessidade de passar cabos até à unidade de controle do sistema. Utiliza os cabos existentes no veículo, para enviar sinais digitais dos novos sensores digitais activos através da patenteada tecnologia DataCAN TM ao mostrador de LED no interior do habitáculo. Esta versatilidade oferece a melhor e única solução para aplicação em veículos de passageiros, camiões com e sem atrelado, autocarros, camionetas, autocaravanas, veículos com rulote, equipamentos agrícolas.
</p><ul>
<li>3E-VPC3048DL Kit dianteiro 4 sensores VPC em forma de L com mostrador</li>
<li>3E-VPC3048BL Kit dianteiro 4 sensores VPC em forma de L com buzzer</li>
<li>3E-VPC3047BS Kit traseiro 4 sensores VPC direitos com bessouro</li>
<li>3E-VPC3047BL Kit traseiro 4 sensores VPC em L com bessouro</li>
<li>3E-VPC3047DS Kit traseiro 4 sensores VPC direitos com mostrador</li>
<li>3E-VPC3047DL Kit traseiro 4 sensores VPC em L com mostrador</li>
<li>3E-VPC304P2L Kit traseiro 4 sensores VPC em L aplicado como segundo sistema num veículo como a vref. VPC3047 ex. uso na rulote</li>
</ul></section>

* box-sizing: border-box
section display: block; margin: 50px auto; text-align: center
p, ul  display: inline-block; width: 100%; margin: 0 auto; text-align: left; vertical-align: middle
@media screen and (min-width: 1000px) ul, p width: 49%;

仅用于测试：

section border: 1px solid red
p border: 1px solid blue
ul  border: 1px solid green

如果您想将<h1> 放入<p>，请记住该部分至少需要一个标题， 由于内容多样 - 一个好的解决方案是向该部分添加一个类 - 仅在需要时拆分

@media screen and (min-width: 1000px) .two ul, .two p width: 49%;

您绝对可以自己设置各个元素的样式 - 属性，例如：字体、背景、边距、内边距、边框、垂直对齐和文本对齐。避免使用 id 必须是唯一的，改用 class - 一点提示：

<section class="two"><h1>I'm red</h1> ... </section>
.two h1 color: red