html - phonegap 的 css - 如何让三个列表项平均共享页面？-6ren

html - phonegap 的 css - 如何让三个列表项平均共享页面？

转载作者：太空宇宙更新时间：2023-11-04 14:36:46

25

4

我正在尝试制作一个 PhoneGap 应用程序，主菜单有标题和三个按钮，如下所示:

  <body>
        <div class="app">
            <div class="headerOne">
                <h1></h1>
            </div>  
            <div class="menu">
                <ul>
                    <li>
                        <a class="shop">Shop</a>
                    </li>
                    <li>
                        <a class="login">Login</a>
                    </li>
                    <li>
                        <a class="account">New Account</a>
                    </li>
                </ul>
            </div>  
        </div>
    </body>

我希望这些按钮填满页面，但能够针对不同的手机屏幕进行更改，我该怎么做？这是我的 CSS:

<!-- language:lang-css -->
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
    -webkit-touch-callout: none;                
    -webkit-text-size-adjust: none;             
    -webkit-user-select: none;                  
    background-color:#E4E4E4;

    background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);

    background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #A7A7A7),
        color-stop(0.51, #E4E4E4)
    );

    background-attachment:fixed;
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    height:100%;
    margin:0px;
    padding:0px;
    text-transform:uppercase;
    width:100%;
}

/* Portrait layout (default) */
.app {
    height:100%;                   /* text area height */
    width:100%;                   /* text area width */
    text-align:center;  
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) {
    .app {
        background-position:left center;
    width:100%;
    height:100%;
    }
}

.headerOne{
border: 1px solid black;
background: -webkit-linear-gradient(top, #000000, #333333);
width:100%;
height:30px;
border-radius: 2px;
font-size:24px;
    font-weight:normal;
    text-align:center;
color:white;
margin-bottom:30px;
}

.menu li{
margin-top:30px;
min-height:30px;
min-width:60px; 
}

.shop{
border:1px solid black;
border-radius:2px;
background:black;
color:white;
-webkit-box-shadow:rgb(110,110,110) 2px 2px;
}

.login{
border:1px solid black;
border-radius:2px;
background:black;
color:white;
-webkit-box-shadow:rgb(110,110,110) 2px 2px;
-webkit-box-flex:1;
}

.account{
border:1px solid black;
border-radius:2px;
background:black;
color:white;
-webkit-box-shadow:rgb(110,110,110) 2px 2px;
-webkit-box-flex:1;
}

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

我还有一个标准格式的 css 文件，我想我会把它放在上面看看它是否影响它:

 html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

最佳答案

你试过吗

height: 33.3%

对于每个元素？

附言。如果它们不适合布局，请在 html 和 body 上使用 height: 100%

PPS。使用绝对布局。例如。 headerOne top:0;左:0；右:0； height: 30px , and menu top: 30px;左:0；右:0；底部:0；

关于html - phonegap 的 css - 如何让三个列表项平均共享页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18696489/

25

4

0

文章推荐： c++ - 使用＆符号后跟下划线命名的变量是什么意思？

文章推荐： html - 给 iframe 一个边框半径

文章推荐： C++ 3d数组

文章推荐： javascript - 我如何在 JS 中将数字添加到变量中？

phonegap-plugins - Phonegap : Floating bubble notification like facebook messenger in Phonegap
Example image 如何在 Phonegap 中添加像这张图片这样的 float 气泡通知。最佳答案没有您正在寻找的“开箱即用”插件。但是，您可以创建自己的插件或简单地使用 phonega
phonegap-plugins - PhoneGap 构建打印？
我正在使用 HTML 和 JS、JQuery Mobile 构建一个应用程序，并使用 PhoneGap Build 进行打包。客户想知道是否可以添加打印功能...有人知道吗？没有 PG Build 打
android - Phonegap - 设置 Phonegap
我已经安装了 Phonegap 使用 $ npm install -g PhoneGap 我也创建了项目。之后我做了 $ PhoneGap build android 它给出了 [phonegap]
iPhone错误ld : duplicate symbol _SBJSONErrorDomain in/Users/Shared/PhoneGap/Frameworks/PhoneGap.框架/PhoneGap
我尝试创建 Phonegap 项目，其中需要集成 ASIHTTPRequest 和 JASON 引用，并出现以下错误 ld: duplicate symbol _SBJSONErrorDomain
cordova - 如何在我的 Phonegap 应用程序中升级 Phonegap？
我有一个 Phonegap 应用程序，我从早期版本的 Phonegap 开始，我想升级到最新版本。我需要采取哪些步骤来升级它？我正在寻求一般性答案，但我的具体情况是 Phonegap 1.1.0 -
iphone - PhoneGap 安装和创建基于 PhoneGap 的应用程序
我已在我的 MAC 电脑(IOS 10.5.8，SDK 3.1.2)上成功安装 PhoneGap。尝试创建一个新的基于 PhoneGap 的应用程序，包含 PhoneGap 框架并将所需的文件复制到
android - PhoneGap - 在 phonegap 中检测设备类型
我正在 phonegap 中为三个不同的平台构建一个应用程序:Android、iOS 和 Blackberry。这样做时，我必须检测设备类型，以便我可以在不同平台和不同设备(如 Android Pho
iphone - 我的 Phonegap 项目中没有 PhoneGap.plist
开始在Mac上使用phonegap(Xcode 4，构建iPhone应用程序)我已经阅读了很多有关名为phonegap.plist的文件的内容，包括外部URL的白名单和其他内容。这是我的问题，我在
javascript - Phonegap - Phonegap 到 Utils 的更改
所以我有一个运行 Phonegap 1.4.0 的应用程序(不要问)，我决定升级到 1.8.1，这样做时 Phonegap 全局变量不再存在，将被替换为实用程序。所以我转换了每一次出现: var t
Android - 是否可以将 phonegap 应用程序与非 phonegap 应用程序集成
我尝试了什么: 我正在开发一个安卓应用程序。在我的应用程序中，我必须打开 -> 向用户显示 Microsoft Office 文档(doc、docx、xls、xlsx、ppt、pptx)内容。为此，我
android - Phonegap Childbrowser 打开 Phonegap 页面。
使用phonegap制作iOS应用时，ChildBrowser插件可以打开一个可以使用phonegap功能的远程页面吗？例如:在phonegap应用程序中的index.html，调用childbro
android - cordova(phonegap)作为应用程序和在 phonegap 应用程序内部工作不同
我有一个带有 angularjs 的网络应用程序。我想使用 phonegap 将它变成一个移动应用程序 (android)。我使用了 phonegap 构建:https://build.phoneg
testing - 如何在 Phonegap 模拟器上测试 Phonegap 应用程序
我正在使用 Phonegap build 为每个平台生成可执行文件。每次更改代码时，我都必须在 phonegap build 上上传代码并生成新的 Apk 文件(适用于 android)。我不想在真实
android - Phonegap - 在 phonegap.com 上与本地构建时高度不同？
我很生气，这是毫无疑问的，除了明显的可见差异之外，有人报告高度为: $('body').outerHeight(); //1780 与在我的本地 Windows 8 机器上使用 phonegap
android - Phonegap 在本地构建发布版本(没有 Phonegap Build)
我最近使用 phonegap 完成了我的第一个混合应用程序项目。当谈到公开测试时，我有点害怕签名过程。我从这里以及网上的其他地方阅读了许多不同的建议 fragment 来完成这项工作。以下是如何为
javascript - Phonegap "phonegap build ios"命令不起作用
我是 phonegap 的新手，我尝试创建一个简单的 phonegap 应用程序。使用命令行安装phonegap后:--- 我已经成功创建了项目，但是当我尝试运行 phonegap build io
android - PhoneGap - Android - 在 phonegap 中滑动导航
我正在为 Android 平台制作一个 phonegap 应用程序。在这个应用程序中，我想在多个 html 页面中滑动导航。请告诉我该怎么做。要么在单个 html 页面中完成，要么我必须为此滑动导航创
phonegap-plugins - 用于 phonegap 的 Juce 库插件
是否有任何插件可用于 Juce我可以添加哪些库可以同时适用于 IOS 和 android？如果没有，我如何集成 Juce我的电话间隙应用程序中的库？最佳答案没有插件。但您可以使用介绍榨汁机来创建不
cordova - 如何使用 PhoneGap Developer App 调试 Phonegap
Phonegap 刚刚推出了一种方法，可以使用以下命令使用本地服务器立即查看您对 phonegap 应用程序的更改: phonegap serve 然后通过下载 PhoneGap Developer
cordova - 如何添加 PhoneGap 插件并使用 Phonegap build 构建应用程序
我们对如何集成phonegap插件，然后使用phonegap build构建我们的移动应用程序有一些疑问，这可能吗？当您使用 Phonegapbuild 构建您的应用程序时，它会为所有受支持的设备构

首页

博学

6Ren·AI

商城

html - phonegap 的 css - 如何让三个列表项平均共享页面？