0

フォームがあり、ヘルプ テキストを表示したいと考えています。文章が少し長くなる場合があります。ヘルプ テキストを含む div に固定幅を設定し、高さで拡大したいと考えています。次に、ヘルプ テキストの中央を相対入力に揃えます。私は HTML の構造に柔軟に対応しています。

これは、フォームとヘルプ テキストのいじりです。

CSS

.form-parameter { 
     display : block;
}
.form-parameter label , .form-parameter input { 
     width : 150px; 
     display : inline-block;
}

.form-parameter-helptext {
    width : 150px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.1s linear;
}
.form-parameter:hover .form-parameter-helptext { 
    visibility  : visible;     
    opacity: 1; 
}

これまでに見つけたのは、兄弟ではなく親に対してdivを整列させる方法だけです。

4

2 に答える 2

0

これを試して：

.form-parameter-helptext {
    visibility: hidden;
    color: #333;
    background-color: #EEE;
    border: 2px solid lightblue;
    font-size: 13px;
    padding: 5px;
    margin-right: 10px;
    opacity: 0;
    -webkit-transition: opacity 0.1s linear;
    /* This is what I added */
    width:100px; // add the width
    position:absolute; // set the position to absolute
 }

ブラウザーや Web ページでテストしていませんが、フィドルは正常に動作します。

于 2013-09-22T09:15:12.330 に答える