用css排版表格

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

我一直在玩，试图让宾果卡布局工作在 html. 我想学习更有效的方法来布局内容，在 css. 网上有很多很多的例子，但我越来越不知道哪些方式是最好的采取。

在这种情况下，我一直在黑客显示一个宾果卡。 这个想法是输入数字的时刻。 我想很好地布局，然后最终打印出来。

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bingo</title>

    <link rel="stylesheet" type="text/css" href="styles.css" />

    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
</head>

<body>
    <h1>Card</h1>

    <p>15 numbers out of 30</p>

    <div class="card">
        <div class="card-grid">
            <div class="card-row">
                <div class="card-number">
                    <input type="text" class="editable-number" value="1">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="10">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="30">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="50">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="70">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
            </div>
            <div class="card-row">
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="23">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="41">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="64">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="83">
                </div>
            </div>
            <div class="card-row">
                <div class="card-number">
                    <input type="text" class="editable-number" value="9">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="19">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="39">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="59">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="70">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="90">
                </div>
            </div>
        </div>
    </div>
</body>

</html>

css

:root {
    --number-width: 60px;
    --row-height: 40px;
}

body {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 1em;
}

.card {
    max-width: 600px;

    padding: 10px;


    background-color: rgb(255, 5, 5);
    border: solid 3px black;
    border-radius: 5px;
}

.card-grid {
}

.card-row {
    display: block;
    margin-bottom: 5px;
}

.card-number {

    display: inline-block;

    width: var(--number-width);
    max-width: var(--number-width);

    background-color: white;
}



.editable-number {
    width: var(--number-width);
    height: var(--row-height);

    text-align: center;
    border: none;
    font-size: 1.5em;
}

结果

宾果结果

疑问

我想把数字在网格中居中。 我也玩过css变换，但那会使内容超出红色div矩形。

在html中布局这样一个表格视图的最佳方法是什么--没有表格？

理想的情况是，我想在学习的过程中，把这个规模扩大，做更多的事情。

html css grid
1个回答
1
投票

使用CSS CSS Flexbox布局

:root {
  --number-width: 60px;
  --row-height: 40px;
}

body {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 1em;
}

.card {
  max-width: 600px;
  padding: 10px;
  background-color: rgb(255, 5, 5);
  border: solid 3px black;
  border-radius: 5px;
}

.card-grid {
  /* CSS Flexbox Layout using display: flex*/
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-row {
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.card-number {
  display: inline-block;
  width: var(--number-width);
  max-width: var(--number-width);
  background-color: white;
  overflow: hidden;
}

.editable-number {
  width: var(--number-width);
  height: var(--row-height);
  text-align: center;
  border: none;
  font-size: 1.5em;
  box-sizing: border-box;
}
<div class="card">
  <div class="card-grid">
    <div class="card-row">
      <div class="card-number">
        <input type="text" class="editable-number" value="1">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="10">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="30">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="50">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="70">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
    </div>
    <div class="card-row">
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="23">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="41">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="64">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="83">
      </div>
    </div>
    <div class="card-row">
      <div class="card-number">
        <input type="text" class="editable-number" value="9">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="19">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="39">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="59">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="70">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="90">
      </div>
    </div>
  </div>
</div>
0
投票

给予卡片格子一个固定的宽度，并给它和margin auto（自动）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.