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
 }

我没有在任何浏览器或网页上测试它，但小提琴工作正常。

于 2013-09-22T09:15:12.330 回答
0

我将宽度设置form-parametr为 530px 并添加position:relative到它，并且对于您的帮助 div position:abolute;right:0;top:0;width:200px ，据我所知，您无法将帮助文本的中间与仅使用 html 和 css 的相对输入对齐，但我认为这就是您想要的在对齐帮助文本旁边：DEMO

并且为了记录，display:block当您希望宽度起作用并且您希望帮助不可见时，您需要设置为此 div，您使用visibility : hidden这种方式只是隐藏了该 div，但正如您所看到的，有一个空白空间可以容纳放置您的帮助文本，如果您想删除该空白，您应该display:none使用

于 2013-09-21T18:02:55.500 回答