我可以在另一個按鈕內嵌入按鈕嗎？

這是由於儘量保持我的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>

我試着築巢按鈕，給了它一個class和id並沒有說我申請到類和ID的子按鈕得到執行的特性，更還有孩子按鈕完全失控的大容器，並將其本身放置在DOM中，就像它是一個完全獨立的標籤，不會被任何其他標籤嵌套。

[更新]

顯然，這是禁止的窩內的另一個按鈕，但此外我想解釋爲什麼嵌套按鈕的行爲是不響應CSS樣式，以及究竟是現在放在DOM當中，它現在是一個完全獨立的標籤本身還是什麼？

現在，我也將被迫將父按鈕標籤更改爲任何其他標籤，以便可以在其中嵌入子按鈕。我想爲父按鈕標記 ex的替代標記的建議：我可以將父按鈕更改爲div標記，

但我需要一個更具描述性的標記語義（除了一個div以外的東西），我首先將那個父按鈕作爲一個切換按鈕，這樣當我單擊它時，它將顯示並隱藏最大容器div。

來源

2016-09-08 AndrewMk

這是無效。在WC3 recomendation爲按鈕元件可以讀：

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

Interactive content包括：

一個
音頻（如果該控件屬性存在）
按鈕
嵌入
iframe
img（如果usemap a ttribute存在）
輸入（如果該類型屬性不是處於隱藏狀態）
密鑰生成
標籤
對象（如果USEMAP屬性存在）
選擇
textarea的
視頻（如果控件屬性存在）

來源

2016-09-08 08:59:37

除此之外，W3C驗證拋出此錯誤： '錯誤：元素div不允許作爲此上下文中元素按鈕的子元素。（抑制來自該子樹的進一步錯誤。）' – Roberrrt

上下文是按鈕是「display：inline-block」。將按鈕更改爲顯示：block，它將是「有效的」。如果你這樣做，不，最好不要這樣做。 –

@PatrickAleman它的有效與否不取決於'display'屬性，而是'

你不能這樣做。按鈕並不意味着包含其他元素。但是，您可以風格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>

來源

2016-09-08 09:07:27 Bender

我可以在另一個按鈕內嵌入按鈕嗎？

回答

相關問題