CSS寬度爲100％

我有一個頁面，看起來像this jsfiddle，下面的代碼：CSS寬度爲100％

html: 
<div class="parent"> 
    <div class="child"> 
    <input type="text"> 
    <input type="submit"> 
    </div> 
</div> 

css: 
.parent { width: 500px; } 
.child { width: 100%; }

我如何得到它，以便他們一起擔起家長的div的100％寬度（文字輸入相應地拉伸）？

澄清：我想要一行中的按鈕是固定的寬度，並且輸入要佔用父級的剩餘寬度，以便一起使用width = parent寬度。如果行中沒有按鈕，我希望textinput佔據整個寬度。

來源

2013-06-30 user1253952

如果我理解正確的話，使用'的位置是：絕對的;左：500像素;右：0'上'.child'。你應該改變結構，使'child'不在'parent'內。除非我誤解了。 – Dave

通常，子寬度是'100％'，即500px。你想要延伸什麼？文本框和按鈕？然後，您必須將CSS分別添加到兩個字段中。 –

.parent { width: 500px; margin:auto; } 
.child { width: 100%; }

添加此做出輸入延伸到全寬

.child input { width: 100%; }

來源

2013-06-30 03:40:57 panindra

但他們佔用了兩行：http://jsfiddle.net/QpCCD/7/我想要佔用一行，在一起他們有一個父母的寬度。 – user1253952

有很多方法可以做到這一點。一種方法是使用display:table-x屬性。

如果包裹在自己的div輸入元素，像這樣：

<div class="parent"> 
    <div class="text"> 
     <input type="text" /> 
    </div> 
    <div class="button"> 
     <input type="submit" /> 
    </div> 
</div>

然後樣式父爲display:table，包裝div的爲display:table-cell，並給予寬度div.button，像這樣：

.parent { 
    width: 500px; 
    background-color:blue; 
    display:table; 
} 
.text { 
    display:table-cell; 
} 
.text input { 
    width:100%; 
    -webkit-appearance:none; 
} 
.button { 
    display:table-cell; 
    background-color:red; 
    width:100px; 
}

然後你就可以實現你正在尋找的結果：http://jsfiddle.net/QpCCD/9/

來源

2013-06-30 03:47:49 Charlie

不幸的是我不認爲這也可以。我已經設置了這樣一個用戶可以添加或減少行，一些行將有多個按鈕和一個輸入（所有行都有一個添加按鈕，刪除按鈕，或兩者），所以我想更具活力的東西。 – user1253952

你的問題是具體詢問兩個項目。什麼是不動態的呢？你可以用很多方法修改它，比如：http://jsfiddle.net/QpCCD/25/。 – Charlie

這與@ panindra的帖子類似，但它將兩個輸入保持在同一行。我已經添加了一些顏色的樣本，以便能夠看到屏幕上的位置。

<html> 
<head> 
<style type="text/css"> 
    body { background-color: black; } 
    .parent { width: 500px; background-color: white; text-align: center; } 
    .child { width: 100%; position: relative; margin: 0px 0px 0px 0px; border: 0px; } 
    .child input { width: 49%; margin: 0px 0px 0px 0px; border: 0px; } 
</style> 
</head> 
<body> 
<div class="parent"> 
    <div class="child"> 
    <input type="text"> 
    <input type="submit"> 
    </div> 
</div> 
</body> 
</html>

事實上，這將是更接近：

.child input { width: 248px; }

來源

2013-06-30 04:16:02 nocturns2

CSS寬度爲100％

回答

相關問題