Google網站中HTML框的大小

我試圖在HTML網站中插入HTML框的可摺疊表格。可摺疊桌子的代碼是從http://tutorials.seowebpower.com/google-sites-advanced/collapsible-table。代碼是Google網站中HTML框的大小

<html> 
<head> 
<style> 
    .container { 
     background-color:deepskyblue; 
     width: 600px; 
     height:50px; 
     position: relative; 
    } 
    .title { 
     font-size: 16pt; 
     font-weight: bold; 
     color: aliceblue; 
     position: absolute; 
     left: 20px; 
     top:25%; 
    } 
    #opened { 
     display: none; 
    } 
    .arrow-up { 
     width: 0; 
     height: 0; 
     border-left: 10px solid transparent; 
     border-right: 10px solid transparent; 
     border-bottom: 10px solid white; 
    } 
    .arrow-down { 
     width: 0; 
     height: 0; 
     border-left: 10px solid transparent; 
     border-right: 10px solid transparent; 
     border-top: 10px solid white; 
    } 
    .arrow-up, .arrow-down { 
     position: absolute; 
     top: 40%; 
     right:15px; 
    } 
    .hidden-content { 
     margin:0 0 20px 0; 
     padding: 10px 20px 10px 20px; 
     border: 1px solid deepskyblue; 
     border-top: none; 
     background-color: aliceblue; 
    } 
</style> 
<script> 
    var collapse; 
    var uncollapse; 
    var turnOn = true; 

    // Chrome Sites Fix 
    var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; 

    function tempChromefix() { 
     // To turn off set true to false 
     if (turnOn == false && is_chrome) { 
      document.getElementById("opened").style.display = "block"; 
      document.getElementById("closed").style.display = "none"; 
     } else { 
      return false; 
     } 
    } 

    function uncollapse() { 
     document.getElementById("closed").style.display = "block"; 
     document.getElementById("opened").style.display = "none"; 
    } 

    function collapse() { 
     document.getElementById("opened").style.display = "block"; 
     document.getElementById("closed").style.display = "none"; 
    } 
</script> 
</head> 

<body onLoad="tempChromefix()"> 

<table id="closed"> 
    <tr> 
     <td> 
      <div class="container" onclick="collapse()"> 
       <div class="title">Click to open drop-down</div> 
       <div class="arrow-down"></div> 
      </div> 
     </td> 
    </tr> 
</table> 

<table id="opened"> 
    <tr> 
     <td> 
      <div class="container" onclick="uncollapse();"> 
       <div class="title">Click to close drop-down</div> 
       <div class="arrow-up"></div> 
      </div> 
      <div class="hidden-content"> 
       <h3>It works!</h3> 
       <p>This content is to be hidden from the user until clicked. </p> 
      </div> 
     </td> 
    </tr> 
</table> 
</body> 
</html>

我面臨的問題是與表的寬度。我希望它有最大的可能的寬度取決於屏幕大小。例如，我希望將表格展開爲MacBook以及iMac中的屏幕尺寸。

合乎邏輯的方法是使用width: 100%，以便表格繼承其父級的屏幕大小。但是，看起來在HTML Box中，不同的類別不會繼承父類的屬性。

例如在.container部分中，如果我使用width: 100%，它摺疊爲零寬度而不是屏幕的全部大小。

將不勝感激任何幫助！

--- Madhur

來源

2015-12-16 Madhurjya

我有這個問題還，並最終想通了（在非常不直觀）的方法是將鼠標懸停在HTML複選框，然後單擊「對齊中心」圖標。當你保存時，元素將是全角（我的div至少是）。

來源

2016-11-25 00:26:34 TrentDavis

Google網站中HTML框的大小

回答

相關問題