다른 단추 안에 단추를 중첩시킬 수 있습니까?

이것은 가능한 한 정확하게 내 html 의미를 유지하려고 시도하여 발생하는 문제입니다.다른 단추 안에 단추를 중첩시킬 수 있습니까?

동일한 페이지에서 기능을 수행하는 상위 버튼이 있으며 다른 페이지로 리디렉션되는 앵커를 중첩하는 큰 컨테이너의 상위 태그 역할을하는 상위 태그와 하위 태그로도 작동하는 div 태그가 있습니다. 일부 동작을 수행한다고 가정하는 다른 버튼의 부모. 내가 버튼을 중첩 시도

<button> 
    <div id="the-most-big-container" 
    <a href="http://www.RedirectMeToAnotherPage.com"></a> 
    <div> 
    <button> do some action </button> 
    </div> 
    </div> 
</button>

는, 그것을 클래스와 ID와 내가 아이 버튼을 수행 얻을 클래스와 ID에 적용되는 속성 없음을주고, 더 또한 아이 버튼에서 완전히 얻는다 큰 컨테이너이며 다른 태그에서 중첩되지 않은 완전한 독립 태그 인 것처럼 DOM에 자체적으로 배치됩니다.

는

그것은 [업데이트]

분명히이 다른 내부의 버튼을 둥지로 금지되어 있지만, 또한 내가 중첩 된 버튼의 동작은 CSS 스타일로하지 응답하는 이유에 대한 설명을 부탁하는 방법과 정확히 이제는 DOM과 관련하여 스스로를 배치하고 있습니다. 이제는 자체 독립 태그가 되었습니까?

또한 이제 부모 단추를 다른 태그로 변경해야만 내부에 자식 단추를 중첩시킬 수 있습니다. 부모 단추 태그에 대한 대체 태그에 대한 제안을 원합니다. 예 : 부모 단추를 div 태그로 바꿀 수 있습니다.

의미가 더 의미가있는 태그가 필요합니다 (div), 처음에는 상위 버튼을 전환 버튼으로 사용하여 클릭하면 가장 큰 컨테이너 div를 표시하고 숨 깁니다.

출처

2016-09-08 AndrewMk

이것은 이 유효하지 않습니다.입니다. 버튼 요소의 WC3의 권고가에서는 읽을 수있다 (컨트롤 속성 경우가 존재)

버튼

는

을 다음 사이트

오디오

:

Content model:
Phrasing content, but there must be no interactive content descendant. [source: wc3.org ]

Interactive content 포함
iframe
img (usemap a ttribute는 (type 속성이 숨겨진 상태가 아닌 경우)의 usemap 속성이 존재하는 경우
Keygen은
라벨
객체()
선택) 본
입력
텍스트 영역
비디오 (controls 특성이있는 경우)

출처

2016-09-08 08:59:37

는, W3C의 유효성 검사기가 발생합니다 : 그러나, 당신은 여기가 부트 스트랩과 함께 모습입니다, 모양과 버튼의 느낌을 가지고 div 요소 스타일을 지정할 수 있습니다 이 오류 : '오류 :이 컨텍스트에서 요소 div는 하위 요소로 허용되지 않습니다. (이 하위 트리에서 추가 오류를 억제합니다.) ' – Roberrrt

버튼이 "display : inline-block"이라는 컨텍스트입니다. 버튼을 표시 : 블록으로 변경하면 "유효"합니다. 당신이 그것을해야합니까, 아니, 더 그것을하지 않는 것이 좋습니다. –

@PatrickAleman 그것이 유효한지 아닌지는'display' 속성에 의존하지 않고 '

수행 할 수 없습니다. 버튼은 다른 요소를 포함하지 않습니다.그 외에도

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</head> 
 
<body> 
 
    <div class="btn btn-default"> 
 
     outer button 
 
     <br /> 
 

 
     <button class="btn btn-primary"> 
 
      inner button 
 
     </button> 
 
    </div> 
 
</body> 
 
</html>

출처

2016-09-08 09:07:27 Bender

다른 단추 안에 단추를 중첩시킬 수 있습니까?

답변

관련 문제