Question

我正在努力为焦点http://jsfiddle.net/krpkm5dc/上的输入字段创建文本提示。第一个问题是如何为position：absolute元素设置max-width，我找到了解决方案 - display：table。

 <div class="wrapper">
    <input type="text">
    <div class="hint">
        Lorem ipsum
    </div>
</div>

.wrapper {
    position: relative;
    display: inline-block;
}
.hint {
    color: white;
    background: #333;
    position: absolute;
    top: 0;
    left: 100%;
    display: none;
    max-width: 200px;
}
input:focus ~ .hint {
    display: table;    
}

但是当我试图将它定位到右边时，它有奇怪的行为

.hint {   
    right: 100%;    
}

http://jsfiddle.net/6vxye8q5/：右侧与输入的左侧不匹配。为什么它的行为如此？

Answer 1

合并display: table;和position: absolute;总是有点奇怪。它真的没有理由（and I've logged bugs with Chrome because of it），它只是。请尝试将提示设置为display: block;。 JSFiddle example

Answer 2

我猜你希望.hint元素的宽度与输入元素的宽度相同。

如果您希望.hint出现在输入字段的左侧，将偏移设置为left: -100%和right: 100%。

如果您希望.hint出现在输入字段的右侧，将偏移设置为right: -100%和left: 100%。

要完全理解为什么会这样，你需要阅读关于如何为绝对定位的元素计算偏移和宽度的CSS规范：

参考： http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width

您还可以使用边距值将.hint元素偏离输入字段或略微重叠，具体取决于您要如何设置样式的样式。

要获得较短提示文本的缩小到适合宽度，请将文本包含在display: inline-table的元素中，并相应地调整text-align的{{1}}属性。

＆＃13;

.hint

＆＃13;

.showLeft {
  text-align: right;
}
.showRight {
  text-align: left;
}
.wrapper {
  position: relative;
  display: inline-block;
}
input:focus ~ .hint {
  display: block;
}
.hint {
  position: absolute;
  top: 0;
  display: none;
}
.tableit {
  display: inline-table;
  text-align: left;
  color: white;
  background: #333;
}
.showLeft .hint {
  left: -100%;
  right: 100%;
}
.showRight .hint {
  text-align: right;
  right: -100%;
  left: 100%;
}

＆＃13;

显示的绝对定位：表格元素

2 个答案: