How to change property of ul tag css in HTML

问题

I'm using Slide of bootstrap jquery and css, It runs normal and no problem happens.

this is my source:

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

this is my 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;
}

When I check and run on firebug on browsers, it seem auto generated some line at tag:

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

How Can I remove those lines auto generated or Can I change: padding-top:50% to padding-top:67% Or any solution for me to fix the problem..

回答1:

you can use !important for that.

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

too override inline style you can do this

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

or you can use javascript solution provide by @Renzo Calla

回答2:

As @Terry said those inline styles might be added by the library, if you still want to overwrite them you can use the jquery css

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

Based on this answer: https://stackoverflow.com/a/38194916/2894798

回答3:

In that case, I have to suggest you an easy and dirty way: add in your css

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

That will fix the problem. If you will provide js in that page, i will provide an answer editing what is setting that css in ul element to padding-top:67% without overriding it.

来源：https://stackoverflow.com/questions/50116505/how-to-change-property-of-ul-tag-css-in-html

标签

javascript

jquery

html

css

bootstrap-4