javascript - 提示输入字段的右下角应该是响应式的

Question

我是 CSS 新手。

尝试对齐这些输入字段验证工具提示这是 fiddle : http://jsfiddle.net/fade3r5f/

任何人都可以帮助我如何做到这一点。？我可以左右移动它，但不能像下图所示那样做

body {
  padding: 5em 3em;
}
input {
  padding: .5em;
}

p {
  position: relative;
}
.error {
  position: absolute;
  top: -3.5em;
  left: 0;
  padding: .5em 1em .4em;
  background-color: #f66;
  border: 1px solid #f00;
  border-radius: 5px;
  color: #fff;
}
.error::after,
.error::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 15px;
  border: solid transparent;
}
.error::after {
  margin-left: 1px;
  border-top-color: #f66;
  border-width: 7px;
}
.error::before {
  border-top-color: #f00;
  border-width: 8px;
}

<p>
  <input type="text" size="40" />
  <span class="error">Please enter text</span>
</p>

<p>
  <input type="email" size="40" />
  <span class="error">Please enter email</span>
</p>

我正在尝试这样的事情(但它应该位于输入字段的底部):

Answer 1

我想你会喜欢这个:

body {
  padding: 5em 3em;
}
input {
  padding: .5em;
}
p {
  position: relative;
  margin-bottom:15px;
  float:left;
  clear:both;
}
.error {
  position: absolute;
  bottom: -2.5em;
  right: -68px;
  padding: .5em 1em .4em;
  background-color: #f66;
  border: 1px solid #f00;
  border-radius: 5px;
  color: #fff;
  width: 120px;
  z-index:10;
}
.error::after,
.error::before {	
  content: '';
  position: absolute;
  left: 50%;
  margin-left:-5px;
  border: solid transparent;
}
.error::after {
  margin-left: -4px;
  border-bottom-color: #f66;
  border-width: 7px;
  top: -14px;
}
.error::before {
  border-bottom-color: #f00;
  border-width: 8px;
  top: -16px;
}

@media (max-width:479px) {
  .error {
    right:0;
  }
}

<p>
  <input type="text" size="40" />
  <span class="error">Please enter text</span>
</p>

<p>
  <input type="email" size="40" />
  <span class="error">Please enter email</span>
</p>