html - 无法为 div 元素分配 css 规则

Question

我尝试使用 ID 选择器向 div 元素添加一些 css 规则但它什么都不做..

这是我的代码的结果:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

#header {
  background: #DEDEDE;
}

.flex-container {
  display: flex;
}

#header .flex-container {
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 1028px;
  margin: 0 auto;
  /* put the container on the middle */
}

#header .flex-container #logoPicture {
  width: 50%;
  border: solid;
  margin-top: 10px;
  margin-bottom: 10px;
}

#tal {
  border: solid;
}

#header .flex-container img {
  vertical-align: middle;
  border-radius: 20%;
}

#header .flex-container #logo {
  font-family: "Bauhaus 93";
  font-size: 350%;
  color: #E83303;
}

#header .flex-container ul {
  padding-left: 0;
  /* avoud the default padding to the left */
  font-family: "Franklin Gothic", Tahoma;
}

#header .flex-container ul li {
  display: inline-block;
  padding: 11px 25px;
  margin: 3px;
  background: #E83303;
  border-radius: 10px;
  font-weight: bold;
}

<div id="header">
  <div class="flex-container">
    <div id="logoPicture">
      <img src="https://i.imgur.com/cvO9xwB.png">
    </div>
    <div id="logo">RAPITEC</div>
    <div id="tal">
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Shop</li>
        <li>Contact us</li>
      </ul>
    </div>
  </div>
</div>

Answer 1

代替:

#tal {
  border: solid;
}

尝试:

#tal {
  border: 1px solid black;
}

你也可以这样写:

#tal {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

将代码放入 Codepen 时，我看到一个边框(Mac 上的 Chrome 和 Firefox)。看来我们的默认 border-width 和/或 border-color 值不同。最好具体说明这两件事。