如何使一個響應div只在一個水平方向上調整大小？

我想使用JavaScript將更多的文本添加到div中。如何使一個響應div只在一個水平方向上調整大小？

當我更改HTML中的DIV中的文本，它是反應靈敏，但它在兩個方向上增加寬度，而不是隻推文本左，這是期望的行爲響應。

我曾想過使用浮動，但因爲有這個div的左邊或右邊沒有元素，我不知道它將使意義在這種情況下。

這裏是鏈接到我的codepen：http://codepen.io/sentedelviento/pen/bZzPrO?editors=1100

HTML：

<body> 
    <div id='parent'> 
    <div id='test'>Will remain centered no matter</div> 
    </div> 
</body>

CSS：

#parent { 
    width: auto; height: 10%; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    position: absolute; 
    border: 2px solid blue; 
} 

#test { 
    width: auto; height: auto; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    position: relative; 
    border: 2px solid black; 

}

來源

2016-08-15 Allison Stafford

你試過用margin：0 auto來居中div嗎？ – Geding

是嗎？這將如何解決問題？ –

它會站在居中;添加磷的最大寬度也可以幫助但也許我不明白你的問題，你能添加對渴望解決一些說明？ – Geding

檢查： http://codepen.io/anon/pen/bZzXPw?editors=1100

#test { 
    max-width: 80%; height: 80%; 
    margin-top: 1%; 
    float: right; 
    border: 2px solid black; 
    margin-right: 10%; 
}

你也可以使用絕對位置，但一定要記得右對齊：

#test { 
    max-width: 80%; height: 80%; 
    margin-top: 1%; 

    border: 2px solid black; 
    margin-right: 10%; 
    position:absolute; 
    right: 0%; 
}

來源

2016-08-16 00:52:55 Geding

如何使一個響應div只在一個水平方向上調整大小？

回答

相關問題