Question

我是HTML和CSS的初学者，我正在尝试创建这个响应式计算器网站。但问题是，放置不同计算符号的中间列不会显示与它们之外的输入字段一致（请参见附图）。我只是想知道如何潜在地解决这个问题，以便符号与输入字段对齐

＆＃13;

/*Online Calculator CSS*/

.grid {
  display: grid;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: 1fr 1fr 20px 1fr 1fr;
  grid-template-rows: repeat(6, 100px);
  grid-row-gap: 5px;
  grid-column-gap: 10px;
}


/*Title*/

.title {
  grid-column: 2 / 5;
  grid-row: 1;
}


/*Sub Header*/

.sub-header {
  grid-column: 2 / 5;
  grid-row: 2;
}


/*Addition*/

.input-one-add {
  grid-column: 2 / 3;
  grid-row: 3;
}

.input-two-add {
  grid-column: 4 / 5;
  grid-row: 3;
}

.addition-sign {
  grid-column: 3 / 4;
  grid-row: 3;
}


/*Subtraction*/

.input-one-min {
  grid-column: 2 / 3;
  grid-row: 4;
}

.input-two-min {
  grid-column: 4 / 5;
  grid-row: 4;
}

.subtraction-sign {
  grid-column: 3 / 4;
  grid-row: 4;
}


/*Multiplication*/

.input-one-mul {
  grid-column: 2 / 3;
  grid-row: 5;
}

.input-two-mul {
  grid-column: 4 / 5;
  grid-row: 5;
}

.multiplication-sign {
  grid-column: 3 / 4;
  grid-row: 5;
}


/*Division*/

.input-one-div {
  grid-column: 2 / 3;
  grid-row: 6;
}

.input-two-div {
  grid-column: 4 / 5;
  grid-row: 6;
}

.division-sign {
  grid-column: 3 / 4;
  grid-row: 6;
}

.addition-sign,
.subtraction-sign,
.multiplication-sign,
.division-sign {}


/*Styling*/

h1 {
  font-family: "Verdana";
  font-size: 40px;
  color: #13c48c;
}

h4 {
  font-family: "Verdana";
  font-size: 25px;
  color: #9F9F9F;
}

.num-one,
.num-two {
  border-color: #13c48c;
  border-width: 3px;
  font-size: 20px;
  font-style: bold;
  font-family: "Verdana";
  text-indent: 10px;
}

.num-one:focus,
.num-two:focus {
  outline: none;
}

.num-one {}

.num-two {}

.add-sum {}

p {
  font-size: 25px;
  font-style: normal;
  font-family: "Verdana";
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="Online Calculator Tutorial.css" />
</head>

<body>
  <div class="grid">
    <!-- Title -->
    <div class="title">
      <header>
        <h1>Online Calcualator</h1>
      </header>
    </div>
    <!-- Sub Header -->
    <div class="sub-header">
      <h4>Calculations:</h4>
    </div>

    <!-- Addition -->
    <!-- Field #1 -->
    <div class="input-one-add">
      <input id="num-one-add" , class="num-one">
    </div>
    <!-- Addition Sign -->
    <div class="addition-sign">
      <p>+</p>
    </div>
    <!-- Field #2 -->
    <div class="input-two-add">
      <input id="num-two-add" , class="num-two">
    </div>
    <!-- Add Sum -->
    <div class="sum-add">
      <p id="add-sum-add" , class="add-sum"></p>
    </div>

    <!-- Subtraction -->
    <!-- Field #1 -->
    <div class="input-one-min">
      <input id="num-one-minus" , class="num-one">
    </div>
    <!-- Subtraction Sign -->
    <div class="subtraction-sign">
      <p>-</p>
    </div>
    <!-- Field #2 -->
    <div class="input-two-min">
      <input id="num-two-minus" , class="num-two">
    </div>
    <!-- Add Sum -->
    <div class="sum-min">
      <p id="add-sum-min" , class="add-sum"></p>
    </div>

    <!-- Multiplication -->
    <!-- Field #1 -->
    <div class="input-one-mul">
      <input id="num-one-multiplication" , class="num-one">
    </div>
    <!-- Multiplication Sign -->
    <div class="multiplication-sign">
      <p>*</p>
    </div>
    <!-- Field #2 -->
    <div class="input-two-mul">
      <input id="num-two-multiplication" , class="num-two">
    </div>
    <!-- Add Sum -->
    <div class="sum-mul">
      <p id="add-sum-mul" , class="add-sum"></p>
    </div>

    <!-- Division -->
    <!-- Field #1 -->
    <div class="input-one-div">
      <input id="num-one-division" , class="num-one">
    </div>
    <!-- Division Sign -->
    <div class="division-sign">
      <p>/</p>
    </div>
    <!-- Field #2 -->
    <div class="input-two-div">
      <input id="num-two-division" , class="num-two">
    </div>
    <!-- Add Sum -->
    <div class="sum-div">
      <p id="add-sum-div" , class="add-sum"></p>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

段落元素（<p></p>）通常具有上下边距。（在Chrome中检查您的示例;您将看到该边距，并且它来自用户代理样式表。）如果您坚持将符号保留为段落，则需要取消设置该边距。

像

这样的规则

.grid p { margin: 0; }

会这样做。

但是，我认为，你最好完全摆脱<p>和</p>。它们在语义上没有添加任何内容，因为这些符号肯定不是段落。

CSS网格布局 - 将<p>与输入字段

1 个答案: