Question

我有一个显示html布局的WebView。但问题是html布局并没有出现我的预期。我使用xml创建了一个Android布局，但我希望在html中进行布局。这就是我正在尝试实现的目标

灰色部分代表背景图像。紫色部分是图像（Logo）。然后我有一个带圆角的白色方框，里面有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>。

默认情况下，p元素的样式为display:block;，然后按下该按钮。

创建类似于android

1 个答案: