水平CSS - 輸入域100％，保證金按鈕

任務：使文本框寬度爲100％，但允許足夠的空間按鈕。水平CSS - 輸入域100％，保證金按鈕

問題：按鈕出現在下一行並且文本框超過其容器的寬度。

<div class="field"> 
    <input type="text" name="my-field" /> 
    <input type="button" id="my-button" value="Add +" /> 
</div> 

.field { 
    margin-right: -70px; 
    width: 100%; 
} 
.field input[type=text] { 
    display: block; 
    float: left; 
    margin-right: 70px; 
} 
.field input[type=button] { 
    display: block; 
    float: right; 
}

我的主要佈局中使用的以下特技實現與固定側欄靈活的寬度，但由於某種原因這是不工作的上方。

<div class="outer-wrap"> 
    <div class="content"> 
     ... 
    </div> 
    <div class="sidebar"> 
     ... 
    </div> 
</div> 

.outer-wrap { 
    margin-right: -300px; 
    width: 100%; 
} 
.content { 
    float: left; 
    margin-right: 300px; 
} 
.sidebar { 
    float: right; 
}

我在這裏犯了什麼錯誤？

來源

2011-07-25 Lea Hayes

這沒關係，當你需要拉這樣的技巧來實現想要的結果用表格佈局。水平對齊只是在沒有桌子屁股痛，而且也沒有理由不使用它們。 –

@MikaTähtinen無法創造正常打印的版本是相當大的理由不使用表格進行頁面佈局 –

你必須與HTML螺絲位，但除此之外，這個完美的作品在IE7 +和所有現代瀏覽器。

參見：http://jsfiddle.net/thirtydot/25bZC/

CSS：

.field > span { 
    display: block; 
    overflow: hidden; 
    padding-right: 10px 
} 
.field input[type=text] { 
    width: 100% 
} 
.field input[type=button] { 
    float: right 
}

HTML：

<div class="field"> 
    <input type="button" id="my-button" value="Add +" /> 
    <span><input type="text" name="my-field" /></span> 
</div>

來源

2011-07-25 11:49:10 thirtydot

感謝修復，併爲鏈接的jsfiddle！你介意解釋爲什麼它有效嗎？我以前沒有見過。 –

不客氣。我忘了，包括通常的解釋鏈接，[這是]（http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats）。 – thirtydot

要退出這個功能，你必須確保你是浮動的元素右在一個f之前左搖擺。像這樣

<div class="field"> 
    <input type="button" id="my-button" value="Add +" /> 
    <input type="text" name="my-field" /> 
</div>

來源

2011-07-25 11:49:30 GaryDevenay

嘗試給固定寬度

field input[type=text]

和

.field input[type=button]

來源

2011-07-25 11:49:34

水平CSS - 輸入域100％，保證金按鈕

回答

相關問題