Question

在设置主页样式时出现问题。我有一个div，我想根据div内的最大内容设置宽度。这里是代码

<div class="head">
    <div class="time"></div>
    <div class="logo"></div>
    <div class="menu">
        <ul>
            <li>Home</li>
            <li>Profile</li>
            <li>Gallery</li>
            <li>Location</li>
        </ul>
    </div>
</div>

和css：

.head{
    position:relative;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: -o-max-content;
    margin: 0px auto;
}
.time{
    position:absolute;
    width:150px;
    height:50px;
    left:0px;
    top:10px;
}
.logo{
    position: absolute;
    left:0;
    top:0;
    margin:0px auto;
    width:450px;
    height: 200px;
    z-index: -1;
}
.menu{
    position: absolute;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: -o-max-content;
    height: 25px;
    text-align: center;
    top: 210px;
}

使用width: -moz-max-content，width: -webkit-max-content;和width: -o-max-content;适用于chrome，opera和firefox。但是当我使用safari打开网站时，它无法正常工作。当我从safari浏览器检查元素时，它在width: -webkit-max-content;代码样式旁边显示警告标记。它使div的宽度像100％一样。

如何在Safari浏览器中设置width: max-content？

更新

同样的问题转移到width: -moz-available;和width: -webkit-fill-available; CSS代码。

Answer 1

将它们设置为display:inline-block，这将调整为内部内容的max-width

＆＃13;

div {
  border: 1px dotted grey;
  margin: 10px 0;
  text-align: left;
}
div.inlineblock {
  display: inline-block;
}
.align {
  text-align: right
}

＆＃13;

<div>
  <p>testing test</p>
</div>

<div class="align">
  <div class="inlineblock">
    <p>testing testing test</p>
    <p>testing testing</p>
  </div>
</div>

＆＃13;

Safari浏览器中的CSS宽度最大内容

1 个答案: