html - 创建类似于android的html布局

Question

我有一个显示 html 布局的 WebView。但问题是 html 布局并没有按照我的预期出现。我使用 xml 创建了一个 Android 布局，但我想要 html 中的布局。这就是我正在努力实现的目标

灰色部分代表背景图片。紫色部分是一张图片(Logo)。然后我有一个带圆 Angular 的白色盒子，里面有 TextView 和 Button。这是在 android xml 中完成的，但我想要在 html 中类似的东西

这是它在 html 中的样子

但如您所见， Logo 位于白框后面，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;默认情况下，将按下按钮。