두 div로 채우기 너비 중 하나는 부재 중일 수 있습니다.

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> 

가 #name 및 #say가 함께 form의 전체 폭을 채우도록 #say으로, CSS에이 스타일을 가능 #name가 결석하면 모든 너비를 취하는가?

은 (백엔드는 루비 온 레일즈이다, 나는 자바 스크립트를 사용할 수 있고, 그래서 JS 솔루션을 사용할 수 있지만, 순수 CSS 가능한 경우 선호)

Answer 1

, #say 양식의 내부의 첫 번째 요소 인 경우 모든 CSS 솔루션, 기본 반각를 오버라이드 (override)하는 한 최초의 아이의 의사 선택을 시도 :

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

이 간단한 마크 업 구조로 완벽하게 작동합니다. (나는 그것을 테스트했습니다)

Answer 2

당신이 있는지 여부를 확인하기 위해 사용됩니다 두 언어의 중로 사용자가 로그인되어, 그것은 .input - 전체 psedo 코드에 대한

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

죄송 및 .input-부분, 다음 적절한 CSS를 폭이 말 것 변경 입력 필드에 HTML 클래스를 추가하는 조건문을 만들 각각.

우, CSS 만 보지 못했습니다. 죄송합니다. CSS3과 IE에 대한 무시를하지 않고도 똑바로 CSS로 할 수 있다고 생각하지 않습니다. 간단한 들어