css !important 不起作用 & 内联块更改为块

Question

Sorry if this is a duplicate post. I hadn't found the answer yet in a few similar posts.

This is my website's HTML:

 .navbar-block{ display: inline-block; margin-left: 5px; margin-right: 5px; }

 <div id="navbar" style="background-color: #393939; position: relative; top: -8px; left: -8px; width: 100%; height: 37px; border: 8px solid #393939;"> <div id="logo-container" class="navbar-block"> <a href="/questions" style="color:rgba(0,0,0,0);"> <p style="font-size: 25px; color: #B8A184;" class="no-select">JFJudge</p> </a> </div> <div id="navbar-question" class="no-select navbar-block"><p style="font-size: 14px; color: #ffffff; transform: translateY(-1px);">Questions</p></div> </div>

However, the styles inline-block margin-left margin-right all don't seem to work. I checked the display style of the element using a console script. It seems like it has the block style instead.

The solution was to put inline CSS in the element logo-container and navbar-question .

I'm trying to solve the problem by only editing the CSS stylesheet. I also tried:

.navbar-block{
    display: inline-block !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
}

It still doesn't work.

Anything I should try now? Thank you.

Note: I'm using Django localhost to test the HTML, and the stylesheet is put in the static folder.

Answer 1

Sorry if this is a duplicate post. I hadn't found the answer yet in a few similar posts.

This is my website's HTML:

 .navbar-block{ display: inline-block; margin-left: 5px; margin-right: 5px; }

 <div id="navbar" style="background-color: #393939; position: relative; top: -8px; left: -8px; width: 100%; height: 37px; border: 8px solid #393939;"> <div id="logo-container" class="navbar-block"> <a href="/questions" style="color:rgba(0,0,0,0);"> <p style="font-size: 25px; color: #B8A184;" class="no-select">JFJudge</p> </a> </div> <div id="navbar-question" class="no-select navbar-block"><p style="font-size: 14px; color: #ffffff; transform: translateY(-1px);">Questions</p></div> </div>

However, the styles inline-block margin-left margin-right all don't seem to work. I checked the display style of the element using a console script. It seems like it has the block style instead.

The solution was to put inline CSS in the element logo-container and navbar-question .

I'm trying to solve the problem by only editing the CSS stylesheet. I also tried:

.navbar-block{
    display: inline-block !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
}

It still doesn't work.

Anything I should try now? Thank you.

Note: I'm using Django localhost to test the HTML, and the stylesheet is put in the static folder.

Answer 2

In my case it was a JS function running onLoad that changed the display... I can not believe we can have answers to such weird questions in SO:)