右下の入力欄の右下には反応があります

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

私はあなたがこれを好きにしたいと思う：

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 { \t 
 
    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>

Answer 2

ちょうどあなたの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; 
} 

をそして、あなたはその後、ブートストラップを使用している場合は、ブートストラップは、既に異なる位置で利用可能なツールチップを持っているとして、それは非常に簡単です。 いくつかのCSSを上書きするだけです。代わりに、右上の一番下にあるので、エラーショー

Answer 3

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>