Question

我正在尝试在科尔多瓦制作一个底部导航栏。我创建了一个新应用，并将www/index.html文件替换为：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Hello World</title>
  </head>
  <body>
    <div class="nav-container">
      <ul>
        <li><a href="#">Item One</a></li>
        <li><a href="#">item two</a></li>
        <li><a href="#">Item three</a></li>
      </ul>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
  </body>
</html>

大部分变化是：

  <body>
    <div class="nav-container">
      <ul>
        <li><a href="#">Item One</a></li>
        <li><a href="#">item two</a></li>
        <li><a href="#">Item three</a></li>
      </ul>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
  </body>

然后将<ul>和<li>元素转到手机底部的导航栏，我在`www / src / index.html中尝试了以下内容：

html {
  height: 100%;
  width: 100%;
}

body {
  height:100%;
  margin:0px;
  padding:0px;
  width:100%;
}

.nav-container {
  display: flex;
  height: 100%;
  width: 100%;
  position:relative;
}

ul {
  list-style-type: none;
  align-self: flex-end;
  width: 100%;
  text-align: center;
}

li {
  display: inline;
}

逻辑是.nav-container将跨越设备的屏幕。然后<ul>将元素与align-self: flex-end对齐，元素将以text-align: center为中心。但是，它看起来并不完全居中（与cordova run android一起运行）：

我哪里出错了？如何让文本完美居中？

Answer 1

UL默认情况下有一个填充左：40px;这可能会影响它。

无法在Cordova底部中心列出

1 个答案: