Question

在顶部栏中，绿色和红色怎么样＆＃34; li＆＃34;区域宽度为3em？，我在代码中尝试了我的css，但所有3个列表项都保持相同的宽度。

它将显示在移动应用webView中。

谢谢

＆＃13;

ul {
   text-align: center;
}

li {
   height: 2em;
   line-height: 2em;
}

.menuIconLeft {
   width: 3em;
   background-color: green;
}

.menuIconRight {
   width: 3em;
   background-color: red;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>RRR</title>
      <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
      <link rel="stylesheet" href="css/myStyle.css"/>
      <script src="js/jquery-1.11.3.js"></script>
      <script src="js/jquery.mobile-1.4.5.js"></script>
      <meta name="viewport" content="width=device-width"/>
   </head>
   <body>
      <section id="firstpage" data-role="page">
         <div data-role="header" data-position="fixed">
            <nav data-role="navbar">
               <ul class="center">
                  <li class="menuIconLeft">
                     &#9776;
                  </li>
                  <li>
                     Activity label
                  </li>
                  <li class="menuIconRight">
                     &#8942;
                  </li>
               </ul>
            </nav>
         </div>
         <div class="ui-content">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, temporibus, dolore! Doloribus, at repellendus sunt consectetur modi natus suscipit magni explicabo optio sequi, assumenda delectus perferendis excepturi nisi nobis ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos repellendus aliquam sint atque aliquid, tempore voluptatum recusandae et rerum, qui quasi ex at aspernatur. Temporibus voluptatum exercitationem sit modi assumenda!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam voluptatum illum maxime hic ipsa odio eaque cum. Optio cumque sequi recusandae. Nihil voluptatibus soluta ad saepe, quia optio laudantium molestiae.contents of this activity Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores nulla facere soluta tempore nihil, voluptatibus nostrum sequi, voluptate, incidunt distinctio reiciendis qui at totam alias. Culpa fuga rem vitae nesciunt?
            </p>
         </div>
         <div data-role="footer" data-position="fixed">
            <nav data-role="navbar">
               <ul class="center">
                  <li>
                     NO
                  </li>
                  <li>
                     EXTRA
                  </li>
                  <li>
                     YES
                  </li>
               </ul>
            </nav>
         </div>
      </section>
   </body>
</html>

＆＃13;

Answer 1

要坚持您需要的结果：

将列表项显示属性设置为display: inline-block。
将无序列表设置为list-style-type: none，以便列表项目项目符号不会显示。
将左右列表元素分别设置为float: left和float: right，这有很大帮助，因为左侧和右侧列表元素将居中对齐（由于您的ul { text-align: center }），所以除非你告诉他们，否则他们不会左右冲洗。
我在中间列表元素中添加了一个新类menuIconCenter。这适用宽度width: calc(100% - 6em);，因为左侧和右侧列表元素的宽度均为3em，然后将这两个宽度减去100％将产生中心列表元素的剩余宽度。

“绿色和红色”li“区域如何用宽度3em制作？”
添加了header和footer类，以帮助区分页脚和标题部分的工作方式。这是一个重要的架构变化，你能说出原因吗？
添加了<b>以加粗页脚中的文字。

建议：如果你想让这些列表元素可点击或像按钮一样工作，请执行以下（这是伪代码！）：

<li>
    <a href="some URL">Something here</a>
</li>

li > a {
    display: block;
    width: 100%;
}

如有任何问题，请在下面的评论中提问： - ）

ul {
  text-align: center;
  min-width: 320px;
}

li {
  height: 2em;
  line-height: 2em;
  display: inline-block;
  margin: 0;
}
.menuIconLeft {
  float: right;
  width: 3em;
}
.menuIconCenter {
  width: calc(100% - 6em);
}
.menuIconRight {
  float: left;
  width: 3em;
}
.center {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.header .menuIconLeft {
  background-color: green;
}
.header .menuIconRight {
  background-color: red;
}
.header .center {
  border: 1px solid lightgray;
}
.footer .center {
  background-color: lightgray;
}

<section id="firstpage" data-role="page">
  <div class="header" data-role="header" data-position="fixed">
    <nav data-role="navbar">
      <ul class="center">
        <li class="menuIconLeft">
          &#9776;
        </li>
        <li class="menuIconCenter">
          Activity label
        </li>
        <li class="menuIconRight">
          &#8942;
        </li>
      </ul>
    </nav>
  </div>
  <div class="ui-content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, temporibus, dolore! Doloribus, at repellendus sunt consectetur modi natus suscipit magni explicabo optio sequi, assumenda delectus perferendis excepturi nisi nobis ratione.Lorem ipsum
      dolor sit amet, consectetur adipisicing elit. Eos repellendus aliquam sint atque aliquid, tempore voluptatum recusandae et rerum, qui quasi ex at aspernatur. Temporibus voluptatum exercitationem sit modi assumenda!Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Laboriosam voluptatum illum maxime hic ipsa odio eaque cum. Optio cumque sequi recusandae. Nihil voluptatibus soluta ad saepe, quia optio laudantium molestiae.contents of this activity Lorem ipsum dolor sit amet, consectetur adipisicing
      elit. Asperiores nulla facere soluta tempore nihil, voluptatibus nostrum sequi, voluptate, incidunt distinctio reiciendis qui at totam alias. Culpa fuga rem vitae nesciunt?
    </p>
  </div>
  <div class="footer" data-role="footer" data-position="fixed">
    <nav data-role="navbar">
      <ul class="center">
        <li class="menuIconLeft">
          <b>NO</b>
        </li>
        <li class="menuIconCenter">
          <b>EXTRA</b>
        </li>
        <li class="menuIconRight">
          <b>YES</b>
        </li>
      </ul>
    </nav>
  </div>
</section>

水平列表项目具有各种宽度

1 个答案: