提示右下角输入字段应该是响应

Question

我是CSS的新手。

尝试对齐这些输入字段验证工具提示，这是小提琴： 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

我想你想要这样：

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

body {
  padding: 5em 3em;
}
input {
  padding: .5em;
  margin: .5em;
}
p {
  position: relative;
}
.error {
  position: absolute;
  top: -2.6em;
  left: 11em;
  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: 4.5em;
  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 3

只需将其添加到您的CSS：

p {
  position: relative;
  width: 320px;
}

input {
  padding: .5em;
  margin-bottom: 30px;
}

.error {
  position: absolute;
  top: -40px;
  right: 0;
  padding: .5em 1em .4em;
  background-color: #f66;
  border: 1px solid #f00;
  border-radius: 5px;
  color: #fff;
}

如果你使用的是bootstrap，那么它非常简单，因为bootstrap已经提供了不同位置的工具提示。 你只需要覆盖一些CSS。