2016-09-08 2 views
4

Это проблема, связанная с попыткой сохранить правильность моей семантики html.Могу ли я вставить кнопку внутри другой кнопки?

У меня есть родительская кнопка, которая выполняет обе функции на одной странице и выступает в роли родительского тега для большого контейнера, который гнездится на якоре, который перенаправляется на другую страницу, и тег div, который также действует как parent для другой кнопки, которая должна выполнять некоторые действия.

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

Я попытался вложенности кнопку, дал ему класс и идентификатор и ни один из свойств, которые я применяю к классу и ид получить выполняется на кнопку ребенка, более Кроме того, кнопка ребенок получает полностью из большой контейнер и лежит в DOM так же, как это полный независимый тег, не вложенный никаким другим тегом.

[Update]

Видимо, это запрещено гнездо кнопки внутри другого, но, кроме того, я хотел бы получить объяснение, почему поведение вложенной кнопки будучи не реагирует на стили CSS, и как именно это теперь, полагаясь на DOM, теперь это полный независимый тег сам по себе или что?

Также теперь мне придется менять тег родительской кнопки на любой другой тег, чтобы я мог вставлять дочерние кнопки внутри. Я хотел бы предложить заменяющий тег для тега родительской кнопки ex: я мог бы изменить родительскую кнопку в тег div,

, но мне нужен тег, который будет более описательным семантически (что-то другое, чем просто div), У меня была эта кнопка родителя, в первую очередь, чтобы действовать как кнопка переключения, так что когда я нажимаю на нее, она отображает и скрывает самый большой-контейнер-div.

ответ

4

Это Не действительный. В WC3 Рекомендации для для кнопочного элемента вы можете прочитать:

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

Interactive content включает в себя:

  • с
  • аудио (если атрибут управления присутствует)
  • кнопка
  • встраивать
  • iframe
  • img (если usemap a ttribute присутствует)
  • вход (если атрибут типа не в скрытом состоянии)
  • кейген
  • этикетки
  • объект (если атрибут usemap присутствует)
  • выберите
  • TextArea
  • видео (если присутствует атрибут контроля)
+0

В дополнении к этому, w3c валидатор кидает эта ошибка: 'Ошибка: Элемент div не разрешен как дочерний элемент кнопки в этом контексте. (Подавление дальнейших ошибок из этого поддерева.) ' – Roberrrt

+0

Контекст заключается в том, что кнопка« display: inline-block ». Измените кнопку, чтобы отобразить: блок, и он будет «действительным». Если вы это сделаете, нет, лучше не делать этого. –

+2

@PatrickAleman факт, что он действителен или нет, не зависит от свойства 'display', а от того, что элемент' 'является интерактивным. –

0

Вы не можете сделать это. Кнопка не должна содержать другие элементы. Однако, вы можете стилизации Div элемента, чтобы иметь внешний вид и ощущение кнопки, вот как это выглядит с бутстрапом:

<!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>

Смежные вопросы