Question

我有一个表单，我想显示帮助文本。文本有时可能会更长一些。我想为包含帮助文本的div设置固定宽度，并使其按高度增长。然后，将帮助文本的中间部分与相对输入对齐。我对HTML的结构非常灵活。

这是fiddle，其中包含表单和帮助文字。

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相对于父母而不是兄弟姐妹对齐。

Answer 1

我将form-parametr的宽度设置为530px并向其添加position:relative，并为我的帮助div添加position:abolute;right:0;top:0;width:200px 据我所知，你不能将帮助文本的中间部分与只有html和css的相对输入对齐，但我认为这是你想要的对齐帮助文本：DEMO

并且对于记录，当您希望宽度工作时需要将display:block设置为此div，并且您希望帮助不可见，您已使用visibility : hidden这样您只是隐藏了但你可以看到有一个空白区域可以存放帮助文本，如果你想删除那个空格，你应该使用display:none而不是

Answer 2

试试这个：

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

我没有在任何浏览器或网页上测试它，但小提琴效果很好。

垂直对齐div相对于兄弟

2 个答案: