如何在 HTML 中更改 ul 标签 css 的属性答案

【问题标题】：How to change property of ul tag css in HTML如何在 HTML 中更改 ul 标签 css 的属性
【发布时间】：2018-05-01 12:30:52
【问题描述】：

我用的是bootstrap jquery和css的Slide，运行正常，没有问题。

这是我的来源：

<div id="photos" class="tabcontent">
   <div id="ninja-slider">                                                                          
        <div>
           <div class="slider-inner">
              <ul>                 
                 <li><a class="ns-img" href="<%=request.getContextPath()%>/resources/images/car1.jpg"></a></li>
                 <li><a class="ns-img" href="<%=request.getContextPath()%>/resources/images/ban-xe-honda-civic.jpg"></a></li>
                 <li><a class="ns-img" href="<c:out value="${product.thumbnail3}"/>"></a></li>
                 <li><a class="ns-img" href="<c:out value="${product.thumbnail4}"/>"></a></li>
                 <li><a class="ns-img" href="<c:out value="${product.thumbnail5}"/>"></a></li>                                                                          
              </ul>
            <div class="fs-icon" title="Expand/Close"></div>
        </div>                   
   </div>
</div>

这是我的 CSS：

#ninja-slider .ns-img {
  background-color: rgba(0,0,0,0.3);
  background-size: contain;
  border-radius: 3px;
  cursor: default;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  padding-top: 67%;
}
#ninja-slider .slider-inner {
  width: 727px;
  margin: -2px auto;
  font-size: 0px;
  position: relative;
  box-sizing: border-box;
}

当我在浏览器上检查并运行 firebug 时，它似乎在标记处自动生成了一些行：

<ul style="overflow: hidden; padding-top: 50%; height: 0px;">

如何删除自动生成的那些行或我可以更改：padding-top:50% 到 padding-top:67% 或者我可以解决问题的任何解决方案..

【问题讨论】：

这些样式很可能是 Bootstrap 的 JS 库添加的。你到底想达到什么目标？
是的，只是我想删除自动生成这一行：'
或者我该如何修改这一行？
再想一想，您似乎并没有使用 Bootstrap 的轮播（那是他们的“滑块”）。您是否为此使用任何第三方库/插件？
是的，我更多地使用了第三方库，但我检查过它似乎对这个 css 没有影响

标签： javascript jquery html css bootstrap-4

【解决方案1】：

您可以为此使用!important。

<ul class="myul" style="overflow: hidden; padding-top: 50%; height: 0px;">

也可以覆盖内联样式

.myul {
  padding-top: 67% !important;
}

或者您可以使用 @Renzo Calla 提供的 javascript 解决方案

【讨论】：

【解决方案2】：

正如@Terry 所说，这些内联样式可能由库添加，如果您仍想覆盖它们，可以使用jquery css

$('#ninja-slider ul').removeAttr('style');
$('#ninja-slider ul').css("color","blue");

基于此答案： https://stackoverflow.com/a/38194916/2894798

【讨论】：

【解决方案3】：

在那种情况下，我不得不建议你一个简单而肮脏的方法：添加你的CSS

#ninja-slider ul{
     padding-top: 67%!important;
}

这将解决问题。如果您将在该页面中提供 js，我将提供一个答案，将 ul 元素中的 css 设置为 padding-top:67% 而不覆盖它。

【讨论】：