創建類似於android

Question

的html佈局

我有一個WebView，它顯示一個html佈局。但問題是，HTML佈局沒有出現我期待的結果。我使用xml創建了一個Android佈局，但是我希望HTML中的佈局。這是我試圖實現的

灰色部分代表背景圖像。 紫色部分的圖像（標誌）。 然後我有一個白色的圓角和TextView和Button裏面。這是在Android的XML完成，但我想在HTML類似

這是它的外觀在HTML

但正如你所看到的標誌是背後的白盒並且TextView位於按鈕的旁邊而不是頂部。

這裏是我的html代碼

<style> 

    div { 
     padding: 10px 10px; 
     background: #fff; 
     width: 300px; 
     border-radius: 10px; 
     margin : 0 auto; 
    } 
    body { 
     background-image: url("url to background image"); 
     //background-size: cover; 
    } 
    .logo { 
     background-image: url("url to logo"); 
     background-size: cover; 
     height: 70px; 
     width: 200px; 
     margin-bottom 40; 
     background-color: rgba(0, 0, 0, 0); 
    } 
    .container { 
     display: table; 
     height: 100%; 
     position: absolute; 
     overflow: hidden; 
     width: 100%; 
     background-color: rgba(0, 0, 0, 0); 
    } 
    .helper { 
     #position: absolute; 
     #top: 50%; 
     display: table-cell; 
     vertical-align: middle; 
     background-color: rgba(0, 0, 0, 0); 
    } 
    .content { 
     #position: relative; 
     #top: -50%; 
     margin: 0 auto; 
     width: 200px; 
    } 
    .button { 
     -moz-border-radius:15px; 
     -webkit-border-radius:15px; 
     border-radius:15px; 
     background-color: #4CAF50; 
     border: none; 
     color: white; 
     padding: 15px 32px; 
     text-align: center; 
     text-decoration: none; 
     display: inline-block; 
     font-size: 16px; 
     margin: 4px 2px; 
     cursor: pointer; 
    } 
</style> 

<div class="container"> 

    <div class="helper"> 

     <div class="logo"/> 

     <div class="content"> 

      <p1>Text </p1> 

      <input type="submit" class="button" value="Button"> 

     </div> 

    </div> 

</div> 

是否有人可以幫我解決我的html代碼看起來像android xml版本

Answer 1

更改<p1>Text </p1>到<p>Text </p>。

A p默認情況下，元素的樣式爲display:block;，並且會按下按鈕。