用兩個div填充寬度，其中一個可能不存在

我正在嘗試創建一個非常基本的聊天系統，其中一部分將作爲聊天行的輸入框。如果用戶已經登錄，那就是我需要的;但如果用戶沒有登錄，我想要一個額外的文本框來允許他們輸入他們的名字。用兩個div填充寬度，其中一個可能不存在

我有以下的HTML（儘管它當然可以改變）：

<form> 
    <input type="text" placeholder="Name?" name="name" id="name"> <!-- This line may be absent --> 
    <input type="text" placeholder="What do you want to say?" name="say" id="say"> 
</form>

是否有可能利用CSS樣式這將讓#name和#say一起填寫form的整個寬度，與#say如果#name不存在，則取所有寬度？

（後端是Ruby on Rails的;我的JavaScript可用，因此可以使用JS的解決方案，但我們更希望純CSS如果可能的話）

來源

2011-04-05 Chowlett

基於上下文，我想你會使用編程語言（php，javascript）來做很多這樣的事情？你可以給我們什麼其他信息？ – DouglasMarken 2011-04-05 08:41:39

@DouglasMarken - 公平點。增加了它是可用的RoR w/JS。 – Chowlett 2011-04-05 08:43:19

對於一個簡單的，所有CSS解決方案，嘗試第一個孩子僞選擇來此改變默認的半寬時#SAY的形式內的第一個元素：

#name, #say{width:100px} 
#say:first-child{width:200px}

這用你簡單的標記結構完美地工作。（我測試過了）

來源

2011-04-05 08:58:32 Faust

這就是票！它甚至兼容IE7！你贏了1個互聯網。 – Chowlett 2011-04-05 09:22:14

不錯！這是一個很好的竅門。 – 2011-04-05 09:33:51

隨着無論你將使用以確定是否這兩種語言的用戶登錄，創建一個條件語句，增加了一個HTML類能改變它的寬度說。輸入全和。輸入偏

IF user is logged in 
    SET class to input-full 
ELSE 
    SET class to input-partial 
ENDIF

遺憾的psedo代碼，然後有相應的CSS的輸入字段爲每個。

oooh，沒有看到CSS只，對不起。沒有CSS3和無視IE瀏覽器我不認爲你可以用直接的CSS做到這一點。

來源

2011-04-05 08:47:11 DouglasMarken

夠公平的。我會沿着這條路走下去。 – Chowlett 2011-04-05 08:53:11

用兩個div填充寬度，其中一個可能不存在

回答

相關問題