Question

我无法获得以同一行为中心的三个文本：“ 5/1 ARM”，“ 30年固定”和“ 15年固定”。如您所见，“固定30年”要高得多。

我对此很陌生，所以到目前为止我已经很累了。

.loans {
  margin-top: 15%;
  padding-bottom: 150px;
  background-color: lightblue;
}

.loans h1 {
  text-align: center;
  margin-bottom: 0;
}

.loanLenghs {
  clear: both;
  display: inline-block;
  text-align: center;
  width: 100%;
  margin: 0;
  margin-bottom: 0;
}

.rates {
  clear: both;
  display: inline-block;
  width: 100%;
  float: right;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  HTML:
  <div class="loans">
    <h1>Our awesome rates!</h1>
    <div class="loanLenghs">
      <p style="margin-bottom: 0;">30 Year Fixed</p>
      <p style="float: left">15 Year Fixed</p>
      <p style="float: right;">5/1 ARM</p>
    </div>
    <div class="rates">
      <p style="float: right">%4.552</p>
      <p style="float: left">%3.999</p>
      <p style="text-align: center;">%5.332</p>
    </div>
  </div>
</body>

我希望“ 30年期贷款”与其他贷款保持一致。

Answer 1

只需使用flex

.loans {
  margin-top: 15%;
  padding-bottom: 150px;
  background-color: lightblue;
}

.loans h1 {
  text-align: center;
  margin-bottom: 0;
}

.loanLenghs,.rates {
  display: flex;
}
.loanLenghs p, .rates p {
  flex-grow: 1;
  text-align: center;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  HTML:
  <div class="loans">
    <h1>Our awesome rates!</h1>
    <div class="loanLenghs">
    
      <p style="">15 Year Fixed</p>
        <p style="">30 Year Fixed</p>
      <p style="">5/1 ARM</p>
    </div>
    <div class="rates">
      <p>%4.552</p>
      <p >%3.999</p>
      <p>%5.332</p>
    </div>
  </div>
</body>

Answer 2

在CSS文件中更改此行

.loanLenghs {
  clear: both;
  text-align: center;
  width: 100%;
  margin: 0;
  margin-bottom: 0;
}

.loanLenghs p {
    display: inline-block;
}

此外，还要删除嵌入式CSS

          <p>30 Year Fixed</p>
          <p style="float: left">15 Year Fixed</p>
          <p style="float: right;">5/1 ARM</p>

Answer 3

您可以使用此代码

A____________BCDEFGHIJKLMNOPQRSTUVWXYZ

body {
            margin: 0;
            padding: 0;
        }
        .loans {
            margin-top: 15%;
            padding-bottom: 150px;
            background-color: lightblue;
        }
        .loans h1 {
            text-align: center;
            margin-bottom: 0;
        }
        .loanLenghs {
            clear: both;
            display: inline-block;
            text-align: center;
            width: 100%;
            margin: 0;
            margin-bottom: 0;
        }
        .rates {
            clear: both;
            display: inline-block;
            text-align: center;
            width: 100%;
            margin: 0;
            margin-bottom: 0;
        }
        .left {
            width: 30%;
            display: inline-block;
        }
        .center {
            width: 30%;
            display: inline-block;
        }
        .right {
            width: 30%;
            display: inline-block;
        }

三个文本主体与内联块不对齐

3 个答案: