用两个div填充宽度,其中一个可能不存在

时间:2011-04-05 08:37:31

标签: css

我正在尝试创建一个非常基本的聊天系统,其中一部分将是聊天行的输入框。如果用户已登录,那就是我所需要的;但是如果用户没有登录,我想要一个额外的文本框,允许他们输入他们的名字。

我有以下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所有宽度{{1}} 1}}缺席?

(后端是Ruby on Rails;我有javascript可用,所以可以使用JS解决方案,但如果可能的话,更喜欢纯CSS)

2 个答案:

答案 0 :(得分:4)

对于一个简单的全CSS解决方案,当#say是表单内的第一个元素时,尝试使用第一个子伪选择器覆盖默认的半宽:

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

这与您的简单标记结构完美配合。 (我已经测试过了)

答案 1 :(得分:1)

使用这两种语言中的任何一种来确定用户是否已登录,创建一个条件语句,在输入字段中添加一个html类,改变它的宽度,例如.input-full和.input-partial

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

抱歉psedo代码,然后为每个代码都有适当的CSS。

哎哟,没看到CSS,对不起。如果没有CSS3并且无视IE,我认为你不能用直接的CSS做到这一点。