创建类似于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;，并且会按下按钮。