CSS或JS - 刪除內聯元素的默認橫向空間

默認情況下，當內聯HTML元素包含文本並且此文本以n行分隔時，此元素的寬度會自動傳遞以佔用所有可用寬度父容器。因此，如果父容器沒有邊框或填充，則子內聯元素將具有與其父項相同的寬度。這裏是一個圖像，以便更好地解釋：CSS或JS - 刪除內聯元素的默認橫向空間

我想知道是否有某種方式來避免內聯元素的這些默認側面空間（紅色）。

<div name="Parent Element" style="width:100%;"> 
    <div name="Inline Element" style="display:inline-block;"> 
     I have some text here 
    </div> 
</div>

獨特的方法，我可以做到這一點是通過包括每個字之間的<br>：

<div name="Parent Element" style="width:100%;"> 
    <div name="Inline Element" style="display:inline-block;"> 
     I<br>have<br>some<br>text<br>here 
    </div> 
</div>

但它完全不解決我的問題。任何幫助/方向將不勝感激。

來源

2017-04-08 Eduardo SR

你是什麼意思「避開」它們？你想讓'inline-block'佔據父級的全部寬度？ –

我的意思是，我需要「所需移動視圖」中顯示的結果，而不是父級的全部寬度。但是我不能將固定寬度設置爲內聯元素。 –

inline-block將佔據其內容的寬度。所以，我會建議分配一個寬度爲Inline Element。

來源

2017-04-08 21:33:11 lazyvab

我需要內聯元素來自動調整其寬度，而不會在其中留下空白。因此，如果句子在3行中斷，內聯元素的寬度必須是最大行的寬度。設置一個固定的寬度不能解決我的問題。 –

直列塊將佔據必要寬度在一行顯示該內容
當到達父寬度，內容包裹物，但即使寬度將保持等於父，通過包裝文本元素看起來像有一些空間。

因此，使用inline-block不會讓你到你想要得到的地方。然而，有一種方法：

[name="Parent Element"] { 
 
    display: flex; 
 
    justify-content: center; 
 
    font-size: 3rem; 
 
} 
 

 
[name="Inline Element"] { 
 
    flex-basis: auto; 
 
    flex-grow: 0; 
 
    text-align: center; 
 
    background-color: yellow; 
 
    max-width: calc(100% - 120px); 
 
}

<div name="Parent Element" style="width:100%;"> 
 
    <div name="Inline Element" style="display:inline-block;"> 
 
     I have some text here 
 
    </div> 
 
</div>

通常情況下，這樣的問題是通過簡單地給母公司的填充（這迫使孩子包裹）固定。此外，如果您有多個孩子，並且您希望他們具有相同的寬度，請給他們display:block而不是inline-block。

來源

2017-04-08 21:40:32

太棒了，讓我檢查它... –

謝謝，這是一個很好的提示，但我需要根據裏面的文本設置內聯元素的寬度。我會在這裏嘗試另一個html標記，我想我有一個解決方案... –

AFAIK，只要它包裹，就會失去對寬度的控制。如在，它不會倒退。它將保持當前應用規則允許的最大寬度。但是，如果您找到解決方法，請告訴我。 –

CSS或JS - 刪除內聯元素的默認橫向空間

回答

相關問題