safari浏览器中的最大CSS内容

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;作品以及在铬，Opera和Firefox。但是当我使用Safari浏览器打开网站时，它不起作用。当我从Safari浏览器检查元素时，它会在width: -webkit-max-content;代码样式旁显示警告标记。它使得div的宽度与100％相同。

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

UPDATE

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

Answer 1

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

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

<div> 
 
    <p>testing test</p> 
 
</div> 
 

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