在div中只有一个元素

Question

我有这个HTML代码：

    <div>
        <input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>                    
        <span>Proper format "exampel@something.com"</span>
    </div>

我在div上配置了'text-align：center'，但不幸的是span文本也居中（请参见下图）。 我需要span靠近它而不是居中。

Answer 1

你可能应该将你的父元素居中，而不是div形式：

.center-form {
  text-align: center;
}

.center-form form {
  display: inline-block;
  text-align: left;
}

<div class="center-form">
  <form action="">
    <div>
      <input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
    </div>
    <div>
      <input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
      <span>Proper format "exampel@something.com"</span>
    </div>
    <div>
      <input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
    </div>
    <button>Submit</button>
  </form>
</div>

或者，如果您希望span不影响表单位置，请使用position: absolute：

.center-form {
  text-align: center;
}

.center-form form {
  display: inline-block;
  text-align: left;
}

.center-form form div {
  position: relative;
}

.center-form form div span {
  position: absolute;
  left: 100%;
  top: 0;
  
  /* for demo */
  white-space: nowrap;
}

<div class="center-form">
  <form action="">
    <div>
      <input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
    </div>
    <div>
      <input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
      <span>Proper format "exampel@something.com"</span>
    </div>
    <div>
      <input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
    </div>
    <button>Submit</button>
  </form>
</div>

Answer 2

你应该申请'text-align：center;'在输入#cemail上，不在div上。

Answer 3

一个好的 -

position: absolute

• 你得到一个免费的亲戚与div。然后错误将永远不会妨碍输入框的绝对定位。

当然，您需要修复顶部，左侧，右侧，底部以符合您的设计。

Answer 4

您也可以执行此类操作，以允许包装文本。

body {
    font-family: sans-serif;
}
input {
    width: 160px;
    position: relative;
    left: 50%;
    margin-left: -80px;
    box-sizing: border-box;
}
p {
    clear: right;
}
.legend {
    float: right;
    width: 50%;
}
.legend small {
    background: #ccc;
    display: block;
    margin-left: 80px;
    word-wrap: break-word;
    padding: 0.5em;
}

<form>
    <p>
        <input type="text" placeholder="Your Last Name">
        <span class="legend">
            <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consectetur libero magna, ultrices vehicula dui hendrerit ut. Mauris dictum urna nec justo tristique, id rutrum sapien blandit. Ut pellentesque, augue ornare pellentesque dictum, sem lectus hendrerit massa, nec gravida elit mauris sit amet lorem.</small>
        </span>
    </p>
    <p>
        <input type="text" placeholder="Your User Name">
    </p>
    <p>
        <input type="email" placeholder="Your Email">
        <span class="legend">
            <small>Proper format "exampel@something.com"</small>
        </span>
    </p>
    <p>
        <input type="text" placeholder="Your Password">
    </p>
    <p>
        <input type="submit" value="Add Me Now">
    </p>
</form>

Answer 5

  <div>
     <input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>                    
     <span class="float-right">Proper format "exampel@something.com"</span>
  </div>