Question

我正在尝试设置此表单的样式，但是我只能内联进行。其他一切工作正常，但是这种特定形式我只能内联设置样式。（如果相关，我还将使用xampp和php）。

.chat_container {
  display: none;
  box-shadow: -10px -10px 31px -10px rgb(0, 0, 0);
  position: fixed;
  bottom: 0px;
  right: 0vw;
  width: 17.1vw;
  background-color: rgba(9, 45, 79, 0.7);
  z-index: 9999999;
  border-top-left-radius: 10px;
  border-style: solid;
  border-color: orange;
  border-bottom-style: none;
  border-right-style: none;
}

<div class="chat_container" style="position: fixed;bottom: 0px;right: 0vw;width: 17.1vw;background-color: rgba(9, 45, 79,0.7);z-index: 9999999;border-top-left-radius: 10px; border-style: solid; border-color: orange; border-bottom-style: none; border-right-style: none;">

  <form name="form1" style="padding-left: 15px;padding-top: 15px;">
    Nickname: <input type="text" name="uname" style="padding-bottom: 10px;" /> <br />
    <br />

    <div id="chatlogs" style="color: orange; padding-left: 5px;">
      <p>Please wait...</p>
    </div>

    <textarea id="msg_area" name="msg" style="width: 90%;border-radius: 5px; border: none; padding-left: 10px; padding-top: 5px;"></textarea><br />
    <a href="#" onclick="submitChat()" id="chat_button" style="display:none;">Send</a><br />
  </form>

</div>

如果我删除html内联样式，则整个元素都会丢失其样式。

Answer 1

在CSS文件上删除CSS属性display: none

.chat_container {
  box-shadow: -10px -10px 31px -10px rgb(0, 0, 0);
  position: fixed;
  bottom: 0px;
  right: 0vw;
  width: 17.1vw;
  background-color: rgba(9, 45, 79, 0.7);
  z-index: 9999999;
  border-top-left-radius: 10px;
  border-style: solid;
  border-color: orange;
  border-bottom-style: none;
  border-right-style: none;
}

<div class="chat_container">

  <form name="form1" style="padding-left: 15px;padding-top: 15px;">
    Nickname: <input type="text" name="uname" style="padding-bottom: 10px;" /> <br />
    <br />

    <div id="chatlogs" style="color: orange; padding-left: 5px;">
      <p>Please wait...</p>
    </div>

    <textarea id="msg_area" name="msg" style="width: 90%;border-radius: 5px; border: none; padding-left: 10px; padding-top: 5px;"></textarea><br />
    <a href="#" onclick="submitChat()" id="chat_button" style="display:none;">Send</a><br />
  </form>

</div>

Answer 2

没关系。我不知道为什么，但是我用CTRL + f5浏览器，清除了站点cookie，然后以崇高的态度关闭了项目并重新打开它，现在可以了。

为什么我只能内联样式化此元素？并在styles.css中设置样式不会执行任何操作

2 个答案: