css - 具有不同宽度的水平列表项-6ren

css - 具有不同宽度的水平列表项

转载作者：行者123 更新时间：2023-11-28 16:36:07

25

4

在顶部栏中，如何将绿色和红色“li”区域制作成宽度为 3em 的区域？我在代码中尝试了我的 CSS，但所有 3 个列表项的宽度仍然相同。

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

谢谢

ul {
   text-align: center;
}

li {
   height: 2em;
   line-height: 2em;
}

.menuIconLeft {
   width: 3em;
   background-color: green;
}

.menuIconRight {
   width: 3em;
   background-color: red;
}

<!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>

最佳答案

要坚持您所寻找的结果，您需要:

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

"How can the green and the red "li" area be made with width 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>

关于css - 具有不同宽度的水平列表项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34499156/

25

4

0

文章推荐： Python:开始使用 tk，小部件不在网格上调整大小？

文章推荐： javascript - 将数据从 select 导入到 input

文章推荐： python - 无法从其他路径导入类 - ValueError : Empty module name

文章推荐： css - 寻找什么颜色)搭配

java - float(具有 4 个字节的内存)可以在 Java 中保存 long(具有 8 个字节的内存)值。如何？
这是代码片段。请说出这种用小内存存储大数据的算法是什么。 public static void main(String[] args) { long longValue = 21474836
php - 当 Gmail IMAP 具有 utf8 而 Outlook 具有 ISO-8859-7 时，如何读取内容类型 header 并将其转换为 utf-8？
所以我使用 imap 从 gmail 和 outlook 接收电子邮件。 Gmail 像这样编码 =?UTF-8?B?UmU6IM69zq3OvyDOtc68zrHOuc67IG5ldyBlbWFpb
具有 2 个参数的计划过程
很久以前就学会了 C 代码；想用 Scheme 尝试一些新的和不同的东西。我正在尝试制作一个接受两个参数并返回两者中较大者的过程，例如 (define (larger x y) (if (> x
azure - 具有/不具有跨区域恢复的异地冗余恢复服务保管库有什么意义？
Azure 恢复服务保管库有两个备份配置选项 - LRS 与 GRS 这是一个有关 Azure 恢复服务保管库的问题。当其驻留区域发生故障时，如何处理启用异地冗余的恢复服务保管库？如果未为恢复服务启
hibernate - 具有@OneToMany属性的可嵌入实体
说，我有以下实体： @Entity public class A { @Id @GeneratedValue private Long id; @Embedded private
java - 具有 "in"运算符和空列表的条件
我有下一个问题。我有下一个标准: criteria.add(Restrictions.in("entity.otherEntity", getOtherEntitiesList())); 如果我的
Java - 具有 If 语句打印顺序错误的主方法
如果这是任何类型的重复，我会提前申请，但我找不到任何可以解决我的具体问题的内容。这是我的程序: import java.util.Random; public class CarnivalGame{
database - 具有$ setIntersection的Mongodb聚合管道
我目前正在使用golang创建一个聚合管道，在其中使用“$ or”运算符查询文档。结果是一堆需要分组的未分组文档，这样我就可以进入下一阶段，找到两个数据集之间的交集。然后将其用于在单独的集合中进行
java - 具有 Or 条件的正则表达式？
是否可以在正则表达式中创建 OR 条件。我正在尝试查找包含此类模式的文件名列表的匹配项第一个案例 xxxxx-hello.file 或者案例二 xxxx-hello-unasigned.file
c - 具有 `for` 循环的菱形输出
该程序只是在用户输入行数时创建菱形的形状，因此它有 6 个 for 循环； 3 个循环创建第一个三角形，3 个循环创建另一个三角形，通过这 2 个三角形和 6 个循环，我们得到了一个菱形，这是整个程序
c# - 具有 "&"的查询字符串值
我有一个像这样的查询字符串 www.google.com?Department=Education & Finance&Department=Health 我有这些 li 标签，它们的查询字符串是这样
c# - 具有/不同配置值的单元测试静态构造函数
我有一个带有静态构造函数的类，我用它来读取 app.config 值。如何使用不同的配置值对类进行单元测试。我正在考虑在不同的应用程序域中运行每个测试，这样我就可以为每个测试执行静态构造函数 - 但我
c++ - 具有 OR 搜索功能的多键容器
我正在寻找一个可以容纳多个键的容器，如果我为其中一个键值输入保留值(例如 0)，它会被视为“或”搜索。 map, int > myContainer; myContainer.insert(make_
mysql - 具有/多种类型的单个对象的关系表设计
我正在为 Web 应用程序创建数据库，并正在寻找一些建议来对可能具有多种类型的单个实体进行建模，每种类型具有不同的属性。作为示例，假设我想为“数据源”对象创建一个关系模型。所有数据源都会有一些共享属
arrays - 具有 IN 条件的存储过程语法
(1) =>CREATE TABLE T1(id BIGSERIAL PRIMARY KEY, name TEXT); CREATE TABLE (2) =>INSERT INTO T1 (name)
sql - 具有 AS 别名的不明确列引用
我不确定在使用别名时如何解决不明确的列引用。假设有两个表，a 和 b，它们都有一个 name 列。如果我加入这两个表并为结果添加别名，我不知道如何为这两个表引用 name 列。我已经尝试了一些变体，
mysql - 具有 IN 条件的自定义订单
我的查询是: select * from table where id IN (1,5,4,3,2) 我想要的与这个顺序完全相同，不是从1...5，而是从1,5,4,3,2。我怎样才能做到这一点？最
c# - 具有@符号的列名
我正在使用 C# 代码执行动态生成的 MySQL 查询。抛出异常: CREATE TABLE dump ("@employee_OID" VARCHAR(50)); "{"You have an er
java - 具有 + 号的日期格式问题
我有日期 2016-03-30T23:59:59.000000+0000。我可以知道它的格式是什么吗？因为如果我使用 yyyy-MM-dd'T'HH:mm:ss.SSS，它会抛出异常最佳答案 Sim
MYSQL - 具有 in 子句的删除查询中的语法错误
我有一个示例模式，它的 SQL Fiddle 如下: http://sqlfiddle.com/#!2/6816b/2 这个 fiddle 只是根据 where 子句中的条件查询示例数据库，如下所示:

首页

博学

6Ren·AI

商城

css - 具有不同宽度的水平列表项