Question

是否可以使绝对定位的div的宽度足够大以包含文本，但不能更大？我尝试了inline-block，但它似乎不起作用，因为一旦我设置了position：absolute，div将采用父元素的最大宽度。

你能否建议我对子元素进行哪些更改，以便它浮动在父div的中心，并且可能具有最小宽度，但适合内部的文本字符串。

这是jsfiddle：http://jsfiddle.net/hmmrfmk0/

<div class='grand-parent'>
<div class='parent'>
    <div class='child'>
        long long long string
    </div>
</div>

.grand-parent {
    position: absolute;
    width:500px;
    height:100px;
    background-color:red;
}
.parent {
    position:relative;

    margin: 0;
    padding: 0;

    width:500px;
    height:100px;


}

.child {
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color: #ccccc0;
    border: 1px solid black;
    height:15px;
    display:inline-block;

}

THX！

Answer 1

是的。使用white-space:nowrap并删除顶部，左侧，右侧，底部0值以及元素在您想要的位置。在这种情况下，父div的死点。

＆＃13;

.grand-parent {
  width: 500px;
  height: 100px;
  background-color: red;
  margin-bottom: 10px;
}
.parent {
  position: relative;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 100px;
}
.child {
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ccccc0;
  border: 1px solid black;
  height: 15px;
  white-space: nowrap;
}

＆＃13;

<div class='grand-parent'>
  <div class='parent'>
    <div class='child'>
      long long long string
    </div>
  </div>
</div>

<div class='grand-parent'>
  <div class='parent'>
    <div class='child'>
      long long long string ong long long string
    </div>
  </div>
</div>

＆＃13;

Answer 2

您的.child类包括left：0和right：0

这将强制div与它的父级一样宽，内联块不会覆盖它。

从.child中删除右：0，它应该可以正常工作

Answer 3

试试这个fiddle。如果将父项显示为表格单元格并将vertical-align设置为中间，则可以垂直定位。

.grand-parent {
   position: absolute;
   width:500px;
   height:100px;
   background-color:red;
}
.parent {
   position:relative;

   margin: 0;
   padding: 0;

   width:500px;
   height:100px;
   text-align: center;
   display: table-cell;
   vertical-align: middle;

}

.child {
   background-color: #ccccc0;
   border: 1px solid black;
   height:15px;
   display:inline-block;
   vertical-align: middle;


}

使div元素足够宽以容纳文本字符串

3 个答案: