Question

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

我有以下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）

Answer 1

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

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

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

Answer 2

使用这两种语言中的任何一种来确定用户是否已登录，创建一个条件语句，在输入字段中添加一个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做到这一点。

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

2 个答案: