Question

我希望性别标签和邮件以及女性标签和单选按钮排成一行 - 为什么它们是垂直的？默认情况下，它们必须是水平的。

.regform {
  direction: rtl;
  text-align: right;
  max-width: 500px;
  padding: 20px 20px;
  background: #f4f7f8;
  margin: 10px auto;
  background: #f4f7f8;
  border-radius: 8px;
  font-family: 'IRYekan', tahoma;
}

.regform fieldset {
  border: none;
}

.regform legend {
  font-size: 1em;
  margin-bottom: 10px;
}

.regform input[type="text"],
.regform input[type="date"],
.regform input[type="datetime"],
.regform input[type="email"],
.regform input[type="number"],
.regform input[type="search"],
.regform input[type="time"],
.regform input[type="url"],
.regform textarea,
.regform select {
  direction: rtl;
  text-align: right;
  font-family: 'IRYekan', tahoma;
  background: rgba(255, 255, 255, .1);
  border: none;
  border-radius: 4px;
  font-size: 16px;
  margin: 0;
  outline: 0;
  padding: 10px;
  width: 100%;
  background-color: #e8eeef;
  color: #8a97a0;
  margin-bottom: 30px;
}

.regform input[type="text"]:focus,
.regform input[type="date"]:focus,
.regform input[type="datetime"]:focus,
.regform input[type="email"]:focus,
.regform input[type="number"]:focus,
.regform input[type="search"]:focus,
.regform input[type="time"]:focus,
.regform input[type="url"]:focus,
.regform textarea:focus,
.regform select:focus {
  background: #d2d9dd;
}

.regform .number {
  direction: rtl;
  background: #1abc9c;
  color: #fff;
  height: 30px;
  width: 30px;
  display: inline-block;
  font-family: 'IRYekan', tahoma;
  font-size: 0.8em;
  margin-right: 4px;
  line-height: 30px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  border-radius: 15px 15px 15px 0px;
}

.regform label {
  direction: rtl;
  display: block;
  color: #8a97a0;
  margin-bottom: 8px;
}

<div class="regform">
  <form>
    <fieldset>
      <legend><span class="number">1</span> Personal Info </legend>
      <input type="text" name="" placeholder="Name">
      <input type="text" name="" placeholder="Family">
      <div class="gender">
        <label>Gender:</label>
        <input type="radio" name="gender" id="male" value="male">
        <label for="male">male</label>
        <input type="radio" name="gender" id="female" value="female">
        <label for="female">Female</label>
      </div>
    </fieldset>
  </form>
  <div>

Answer 1

这是因为标签显示为一个块，从该类中删除该行：

.regform label {
    direction:rtl;
    color:#8a97a0;
    margin-bottom: 8px;
}

示例：

.regform {
  direction: rtl;
  text-align: right;
  max-width: 500px;
  padding: 20px 20px;
  background: #f4f7f8;
  margin: 10px auto;
  background: #f4f7f8;
  border-radius: 8px;
  font-family: 'IRYekan', tahoma;
}

.regform fieldset {
  border: none;
}

.regform legend {
  font-size: 1em;
  margin-bottom: 10px;
}

.regform input[type="text"],
.regform input[type="date"],
.regform input[type="datetime"],
.regform input[type="email"],
.regform input[type="number"],
.regform input[type="search"],
.regform input[type="time"],
.regform input[type="url"],
.regform textarea,
.regform select {
  direction: rtl;
  text-align: right;
  font-family: 'IRYekan', tahoma;
  background: rgba(255, 255, 255, .1);
  border: none;
  border-radius: 4px;
  font-size: 16px;
  margin: 0;
  outline: 0;
  padding: 10px;
  width: 100%;
  background-color: #e8eeef;
  color: #8a97a0;
  margin-bottom: 30px;
}

.regform input[type="text"]:focus,
.regform input[type="date"]:focus,
.regform input[type="datetime"]:focus,
.regform input[type="email"]:focus,
.regform input[type="number"]:focus,
.regform input[type="search"]:focus,
.regform input[type="time"]:focus,
.regform input[type="url"]:focus,
.regform textarea:focus,
.regform select:focus {
  background: #d2d9dd;
}

.regform .number {
  direction: rtl;
  background: #1abc9c;
  color: #fff;
  height: 30px;
  width: 30px;
  display: inline-block;
  font-family: 'IRYekan', tahoma;
  font-size: 0.8em;
  margin-right: 4px;
  line-height: 30px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  border-radius: 15px 15px 15px 0px;
}

.regform label {
  direction: rtl;
  color: #8a97a0;
  margin-bottom: 8px;
}

<div class="regform">
  <form>
    <fieldset>
      <legend><span class="number">1</span> Personal Info </legend>
      <input type="text" name="" placeholder="Name">
      <input type="text" name="" placeholder="Family">
      <div class="gender">
        <label>Gender:</label>
        <input type="radio" name="gender" id="male" value="male">
        <label for="male">male</label>
        <input type="radio" name="gender" id="female" value="female">
        <label for="female">Female</label>
      </div>
    </fieldset>
  </form>
  <div>

Answer 2

您在标签上使用了display: block，为什么？如果你删除它，它可以正常工作

.regform label {
  direction:rtl;
  color:#8a97a0;
  margin-bottom: 8px;
}

标签标签和单选按钮不是水平的

2 个答案: