投票 我希望矩形宽度更小

Question

请检查下面的链接来检查 HTML 和 CSS 中的代码并检查结果。拜托，我需要结果中的矩形宽度更小。

https://jsfiddle.net/Ahmed_abdelmeguid/6L8vbutw/5/ [在此处输入图像描述][1]

这是 CSS 代码

.tictac_3 > ul {
    width: 50%;
    height: 20px;
    display: flex;
    flex-wrap: wrap;}
  
  .tictac_3 > li  {
    width: 30%;
    height: 30px;
     font-size: 30px;
    font-family: sans-serif;
    background-color:lightblue;
    margin: 5px;
    list-style: none;
    text-align: center;
   float: left;
  }

，在 HTML 代码下方，

<ul class="tictac_3"> 
                                        <li class=".tictac_3">X
                                        <li class=".tictac_3">
                                        <li class=".tictac_3">O
                                
                                        <li class=".tictac_3">
                                        <li class=".tictac_3">X
                                        <li class=".tictac_3">O
                                
                                        <li class=".tictac_3">X
                                        <li class=".tictac_3">O
                                        <li class=".tictac_3">
                                        </ul>    

您可以在我在问题开头提供的以下链接中检查代码和我想要修改它的结果 https://jsfiddle.net/Ahmed_abdelmeguid/6L8vbutw/5/

Answer 1

问题

“拜托，我需要结果中的矩形宽度更小”

好的，OP 代码在基本层面上存在一些问题：

• 每个

• 结束标记

丢失

• 选择器：.tictac_3 > ul 不存在

• height: 20px 被分配给前面提到的选择器。如果它按照预期引用了

  ，那么它就没有什么意义，因为它的所有
  • 都是 height: 30px

更改

• 上的所有类均已删除，
  上的单个类被删除足够了。

• 添加了 max-width: 12rem; 到

每个

• 已更改height 从绝对值 30px 到相对值 2rem。

• 更改font-size与更改height完全一样。

• 将边距从5px减少到1px

• 添加了一点padding-bottom：0.25em

.tictac {
  display: flex;
  flex-flow: row wrap;
  width: 50%;
  max-width: 12rem;
  list-style: none;
}

.tictac li {
  width: 30%;
  height: 2rem;
  font-size: 2rem;
  font-family: sans-serif;
  text-align: center;
  margin: 1px;
  padding-bottom: 0.1em;
  background-color: lightblue;
}

<ul class="tictac">
  <li>X</li>
  <li></li>
  <li>O</li>

  <li></li>
  <li>X</li>
  <li>O</li>

  <li>X</li>
  <li>O</li>
  <li></li>
</ul>