內嵌塊元素寬度是否通過其內容設置？

Question

嗨，我剛剛開始嘗試自學HTML/CSS幾天前。我真的不喜歡問問自己的答案編號。但現在我需要一些幫助，所以我可以找到和平，並最終繼續前進。我試圖用一個下拉按鈕和鏈接來製作一個水平菜單。

.container {border:1px solid black; 
 
      text-align:left; 
 
\t \t \t border-radius:10px; 
 
\t \t \t overflow:hidden;} 
 
\t \t \t 
 
.container a {padding:15px; 
 
       display:inline-block; 
 
\t \t \t font-size:30px; 
 
\t \t \t text-decoration:none; 
 
\t \t \t background-color:grey; 
 
\t \t \t color:white;} \t \t \t 
 

 
.aboutcontainer {display:inline-block;} 
 
\t \t \t 
 
.about {position:absolute; 
 
     display:none; 
 
     width:100%;} \t \t 
 

 
.about a {display:block; 
 
      text-align:left; 
 
\t \t font-size:20px; 
 
\t \t padding:15px 5px;} 
 

 

 
.aboutcontainer:hover .about {display:block;} 
 

 
.container a:hover, .aboutcontainer:hover .button {background-color:red;} 
 

 
.about a:hover {background-color:lightgrey;}

<div class="container"> 
 
<a href="#">Home</a 
 
><a href="#">Media</a 
 
><a href="#">Store</a 
 
><div class="aboutcontainer"> 
 
<a class="button" href="#">About</a> 
 
    <div class="about"> 
 
    <a href="#">About2</a> 
 
    <a href="#">About3</a> 
 
    </div> 
 
    </div> 
 

 
</div>

我無法弄清楚如何使下拉菜單自動相同寬度的下拉按鈕。我認爲，寬度爲100％的下拉菜單（.about）可能會延伸至包含在（.aboutcontainer）中的div，該寬度將顯示爲內聯塊，其寬度由「關於」文本鏈接在裏面。但下拉菜單顯示時會顯示整個屏幕。因此，inline：block元素中的實際內容似乎不會定義該元素的寬度。儘管inline：block元素的邊框會自動包裹它的內容，但如果在父div中沒有​​定義任何固定寬度，它只是一個錯覺，它的實際寬度實際上是整個屏幕的長度（希望我使用正確的術語）。那麼有沒有辦法做到這一點，沒有任何固定的寬度分配？如果沒有，那就好了。我終於有了答案，並且知道即將做的事情是不可能的，並且不要浪費時間。

Answer 1

是的，一個inline-block元素將大小以適合其內容。

爲什麼它不能在你的情況下工作？您有.about定位absolute。

當你絕對位置的元素，你正在服用它的HTML結構，這意味着：

不要爲元素留出空間。相反，將它定位在相對於其最接近的定位祖先的指定位置（如果有的話），或者相對於包含塊。絕對放置的盒子可以有邊距，並且不會與其他邊緣合併。
_{MDN Docs}

這意味着該元件被拉出的結構，和不再影響周圍的元件，或者它的父。

這樣的一個例子：

.parent { 
 
    background: blue; 
 
} 
 
.child { 
 
    background: red; 
 
    position: absolute; 
 
    top: 20px; 
 
}

Below is the parent element, with a blue background. 
 
<div class="parent"> 
 
    <div class="child">Bye bye parent</div> 
 
</div>

如果你運行上面的片段中，你看不到父母或它的藍色背景可言，因爲子元素已經放置在它外面，並相對於視口。

現在回到你的問題。我們如何才能使絕對定位的元素相對於其父項而不是視口進行定位？

答案是非常簡單：position:relative;上的父：

此關鍵字勾畫出的所有元素，就好像元件未定位，並且然後調整元件的位置，而不改變佈局（並且因此離開如果它沒有定位的話，元素的缺口）。位置：相對於表的效果 - * - 組，錶行，表列，表格單元和表標題元素未定義。

相對定位意味着absolute子元素將相對於父元素進行定位。儘管absolute仍然會將元素拉出HTML結構，並且它仍然不會影響周圍元素或其父元素，但absolute元素現在將受其父項的影響。所以，你的情況，設置寬度爲100％會.aboutcontainer小號寬度的100％，而不是視口寬度的100％：

.container { 
 
    border: 1px solid black; 
 
    text-align: left; 
 
    border-radius: 10px; 
 
} 
 
.container a { 
 
    padding: 15px; 
 
    display: inline-block; 
 
    font-size: 30px; 
 
    text-decoration: none; 
 
    background-color: grey; 
 
    color: white; 
 
} 
 
.container>a:first-of-type { 
 
    border-radius: 10px 0 0 10px; 
 
} 
 
.aboutcontainer { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.about { 
 
    position: absolute; 
 
    display: none; 
 
    width: 100%; 
 
} 
 
.about a { 
 
    display: block; 
 
    text-align: left; 
 
    font-size: 20px; 
 
    padding: 15px 5px; 
 
} 
 
.aboutcontainer:hover .about { 
 
    display: block; 
 
} 
 
.container a:hover, 
 
.aboutcontainer:hover .button { 
 
    background-color: red; 
 
} 
 
.about a:hover { 
 
    background-color: lightgrey; 
 
}

<div class="container"> 
 
    <a href="#">Home</a 
 
><a href="#">Media</a 
 
><a href="#">Store</a 
 
><div class="aboutcontainer"> 
 
<a class="button" href="#">About</a> 
 
    <div class="about"> 
 
    <a href="#">About2</a> 
 
    <a href="#">About3</a> 
 
    </div> 
 
</div> 
 

 
</div>

你會在上面的代碼片段通知，我們必須從.container刪除overflow:hidden。這是因爲現在元素完全位於其父元素中，當它從.container溢出時，它會被隱藏。您已應用overflow:hidden，因此末端元素不會超出邊界半徑，因此我只是爲第一個元素添加了邊界半徑。

Answer 2

在這裏，我從.container中刪除了overflow: hidden，並將position: relative加到.aboutcontainer。

.container { 
 
    border: 1px solid black; 
 
    text-align: left; 
 
    border-radius: 10px; 
 
} 
 
.container a { 
 
    padding: 15px; 
 
    display: inline-block; 
 
    font-size: 30px; 
 
    text-decoration: none; 
 
    background-color: grey; 
 
    color: white; 
 
} 
 
.aboutcontainer { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.about { 
 
    position: absolute; 
 
    display: none; 
 
    width: 100%; 
 
} 
 
.about a { 
 
    display: block; 
 
    text-align: left; 
 
    font-size: 20px; 
 
    padding: 15px 5px; 
 
} 
 
.aboutcontainer:hover .about { 
 
    display: block; 
 
} 
 
.container a:hover, 
 
.aboutcontainer:hover .button { 
 
    background-color: red; 
 
} 
 
.about a:hover { 
 
    background-color: lightgrey; 
 
}

<div class="container"> 
 
    <a href="#">Home</a 
 
    ><a href="#">Media</a 
 
    ><a href="#">Store</a 
 
    ><div class="aboutcontainer"> 
 
    <a class="button" href="#">About</a> 
 
    <div class="about"> 
 
     <a href="#">About2</a> 
 
     <a href="#">About3</a> 
 
    </div> 
 
    </div> 
 
</div>