小输入元素在手机上的 td 元素内不可见。 HTML CSS

Question

我有一个数独项目，其中包含 9x9 的数字元素表，并且我在某些处生成输入，这使得它在那里，而不是通常的 8（任何一位数字 1-9）。但不知何故，当我为输入进行样式设计时，虽然这些单元格在电脑上运行良好，但它们在我的手机上根本不起作用，正如您在附图中看到的那样。我怎样才能修好电话呢？

Answer 1

您是否可以测试此代码并且可能使用响应式设计技术（例如媒体查询），您可以确保您的数独网格适应不同的屏幕尺寸和分辨率。

<!DOCTYPE html>
<html>
<head>
  <title>Sudoku Project</title>
  <style>
    /* CSS styles for the Sudoku grid */
    .sudoku {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      gap: 2px;
      border: 1px solid #000;
      width: 400px; /* Adjust the width as needed */
      margin: 0 auto; /* Center the grid horizontally */
    }
    
    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      background-color: #fff;
    }
    
    input {
      width: 100%;
      height: 100%;
      border: none;
      text-align: center;
      font-size: 18px;
    }
    
    /* CSS styles for the empty cells */
    .empty {
      background-color: #ddd;
    }
  </style>
</head>
<body>
  <div class="sudoku">
    <div class="row">
      <div class="cell empty">*</div>
      <div class="cell">8</div>
      <div class="cell empty">*</div>
      <div class="cell empty">*</div>
      <div class="cell empty">7</div>
      <div class="cell empty">*</div>
      <div class="cell empty">*</div>
      <div class="cell">6</div>
      <div class="cell empty">*</div>
    </div>
    <div class="row">
      <div class="cell empty">*</div>
      <div class="cell">9</div>
      <div class="cell empty">*</div>
      <div class="cell">1</div>
      <div class="cell empty">*</div>
      <div class="cell empty">*</div>
      <div class="cell">4</div>
      <div class="cell empty">*</div>
      <div class="cell">7</div>
    </div>
    <!-- Repeat the above structure for the remaining rows -->
    <div class="row">
      <!-- Sixth row -->
    </div>
    <div class="row">
      <!-- Seventh row -->
    </div>
    <div class="row">
      <!-- Eighth row -->
    </div>
    <div class="row">
      <!-- Ninth row -->
    </div>
  </div>
</body>
</html>

小输入元素在手机上的 td 元素内不可见。 HTML CSS

问题描述投票：0回答：1

1个回答

最新问题

小输入元素在手机上的 td 元素内不可见。 HTML CSS

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1