html - 为什么第二个标题 "Chemicals"卡在这种无序列表格式的右边？-6ren

html - 为什么第二个标题 "Chemicals"卡在这种无序列表格式的右边？

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

26

4

我有 2 个无序列表，其中我向左浮动 50%，向右浮动 50%。我喜欢“ Material ”的位置，我希望“化学品”位于左侧(如“ Material ”)，但我不确定还能尝试什么。

我试过将“Chemicals”段落 float 到左侧并将文本对齐设置到左侧。

<div class="labskillsbox">
  <!--Lab Skills - Janky Code.. -->
  <p><strong><em>Materials</em></strong></p>

  <div style="float: left; width: 50%;">
    <ul>
      <li>MeasureNet station and a pH meter</li>
      <li>Drop counter</li>
      <li>Two 50-mL burets</li>
      <li>Buret brush</li>
      <li>BBs container</li>
      <li>Stopwatch</li>
      <li>250-mL beaker</li>
    </ul>
  </div>

  <div style="float: right; width: 50%;">
    <ul>
      <li>150-mL beakers</li>
      <li>Stir bar</li>
      <li>Ruler</li>
      <li>25-mL graduated cylinder</li>
      <li>Plastic funnel</li>
      <li>Buret clamp</li>
    </ul>
  </div>

  <div style="float: left; width: 50%;">
    <p><strong><em>Chemicals</em></strong></p>
  </div>
  <div style="float: left; width: 50%;">
    <ul>
      <li>Vegetable oil</li>
      <li>Walnut oil</li>
      <li>Extra virgin olive oil</li>
      <li>Light olive oil</li>
    </ul>
  </div>

  <div style="float: right; width: 50%;">
    <ul>
      <li>Mobil motor oil</li>
      <li>Quaker State motor oil</li>
      <li>0.025 M sodium hydroxide (NaOH)</li>
      <li>Ethanol</li>
    </ul>
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>

我希望“化学品”的位置类似于“ Material ”(在左侧)。

最佳答案

是float的问题，用float的时候用clear属性

style="clear: both;"

<html>
 <head>
   <title>Testing</title>
   <link rel="stylesheet" href="css/main.css">
 </head>

 <body>
 <div class="labskillsbox">      <!--Lab Skills - Janky Code.. -->
      <p><strong><em>Materials</em></strong></p>

      <div style="float: left; width: 50%;">
        <ul>
          <li>MeasureNet station and a pH meter</li>
          <li>Drop counter</li>
          <li>Two 50-mL burets</li>
          <li>Buret brush</li>
          <li>BBs container</li>
          <li>Stopwatch</li>
          <li>250-mL beaker</li>
        </ul>
      </div>

      <div style="float: right; width: 50%;">
        <ul>
          <li>150-mL beakers</li>
          <li>Stir bar</li>
          <li>Ruler</li>
          <li>25-mL graduated cylinder</li>
          <li>Plastic funnel</li>
          <li>Buret clamp</li>
        </ul>
      </div>
</div>

<div style="clear: both;">
  <p><strong><em>Chemicals</em></strong></p>
  <div style="float: left; width: 50%;">
    <ul>
      <li>Vegetable oil</li>
      <li>Walnut oil</li>
      <li>Extra virgin olive oil</li>
      <li>Light olive oil</li>
    </ul>
  </div>

  <div style="float: right; width: 50%;">
    <ul>
      <li>Mobil motor oil</li>
      <li>Quaker State motor oil</li>
      <li>0.025 M sodium hydroxide (NaOH)</li>
      <li>Ethanol</li>
    </ul>
  </div>
</div>

  </body>
</html>

关于html - 为什么第二个标题 "Chemicals"卡在这种无序列表格式的右边？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57050270/

26

4

0

文章推荐： c - 从Fortran 90调用用C编写的客户端程序

文章推荐： node.js - Nodejs Twit 和 Twitter API，如何更改用户？

文章推荐： python - Tensorflow——添加L2正则化损失简单示例

Python:过滤器(函数，序列)和映射(函数，序列)之间的区别
我正在阅读 Python 文档以真正深入了解 Python 语言，并遇到了 filter 和 map 函数。我以前使用过过滤器，但从未使用过映射，尽管我在 SO 上的各种 Python 问题中都见过这
algorithm - 给定一个 preOrder 和 inOrder 序列，可能有多少级阶 BST 序列？
当我尝试打印 BST 的级别顺序时，这个问题提示了我。这是一个 Pre-Order Sequence: 4, 1, 2, 3, 5, 6, 7, 8 In_order Sequence : 1, 2
c++ - 定义函数后 main 出错？ "undefined reference to ' 序列::序列()'"
我的代码在 main(序列测试；)的第一行出现错误，指出它是对 sequence::sequence() 的 undefined reference 。我无法更改 main 中的代码。有谁知道我该如何
latex 序列\/?
这可能很简单，但我在通常的 latex 指南中找不到任何相关内容。在这句话中: {\em hello\/} “\/”的目的是什么？最佳答案这就是所谓的斜体校正。其目的是确保斜体文本后有适当的间距。
Postgresql 序列
当我从 Postgresql 表中删除所有记录，然后尝试重置序列以在插入时开始一个编号为 1 的新记录时，我得到不同的结果: SELECT setval('tblname_id_seq', (SELE
30、MariaDB 序列
在版本10.0.3中，MariaDB引入了一种称为序列的存储引擎。其ad hoc为操作生成整数序列，然后终止。该序列包含正整数，以降序或升序排列，并使用起始，结束和递增值。它不允许在多个查询中
数字的 Groovy 序列
如何在 Groovy 中获取给定数字的序列，例如: def number = 169 // need a method in groovy to find the consecutive number
作为特定复杂类型的扩展的任何类型元素的 xsd 序列
基本上，如果这是 .NET，它看起来像这样: ISomething { string A { get; } int B { get; } } var somethings = new List
非阻塞赋值的 Verilog 序列
说以下代码部分(同一块): A <= 1 A <= 2 变量 A 总是被赋值为 2 吗？还是会出现竞争条件并分配 1 或 2？我对非阻塞赋值的理解是，由硬件在 future 分配变量 A，因此它可能
WiX Action 序列
在运行 WiX 设置时，我正在寻找操作列表及其顺序。不知何故，官方网站似乎没有提供任何信息。基本问题是我想正确安排我的自定义操作。通常我需要使用 regsvr32.exe 注册一个 DLL，而这只能
具有至少一个元素的 F# 序列
F#初学者在这里我想创建一个类型，它是具有至少一个元素的另一种具体类型(事件)的序列。任何其他元素都可以在以后随时添加。通常在 C# 中，我会创建一个具有私有(private) List 和公共(p
sql - 在Oracle中删除所有用户表/序列
作为构建过程和不断发展的数据库的一部分，我试图创建一个脚本，该脚本将删除用户的所有表和序列。我不想重新创建用户，因为这将需要比所允许的更多的权限。我的脚本创建了一个过程来删除表/序列，执行该过程，然
日期和向量的 R 序列
我想恢复两个向量的第一个日期和相同向量的第二个日期之间的日期序列，.... 这是一个例子: dates1 = as.Date(c('2015-10-01', '2015-03-27', '2015-0
SQL ORDER BY(序列)
这个问题已经有答案了: sql ORDER BY multiple values in specific order? (12 个回答) 已关闭 9 年前。我有一个 sql 语句，我想要ORDER
日期和向量的 R 序列
我想恢复两个向量的第一个日期和相同向量的第二个日期之间的日期序列，.... 这是一个例子: dates1 = as.Date(c('2015-10-01', '2015-03-27', '2015-0
java - 如何在java中转义],[序列？
在用java编写代码时，我需要用“],[”分割字符串。下面是我的代码。 try (BufferedReader reader = new BufferedReader(new InputStreamR
数字的 Collatz 序列
这个问题已经有答案了: Project Euler Question 14 (Collatz Problem) (8 个回答) 已关闭 9 年前。我正在尝试查找数字的 Collatz 序列。以下
C++:使用循环和变量模式(序列)
我有一个例程函数process_letter_location(const char& c, string &word)。在我的 main 中，我声明了一系列字符串变量，如下所示: string s
c++ - 最长的多米诺骨牌链/序列
我需要找到最长的多米诺骨牌链，给定一组 12 个随机挑选的多米诺骨牌。我已经递归地生成了多米诺骨牌的所有可能性(使用 0 到 12 的面值有 91 种可能性)。多米诺骨牌由一 block “砖 blo
c++ - 序列 vector
我有这个数据结构 Seq，它继承了类 vector 但有一些额外的功能。使用这个数据结构 Seq 我有这个预定义的数据结构: typedef Seq > MxInt2d; 我现在想要一个包含多个 Mx

首页

博学

6Ren·AI

商城

html - 为什么第二个标题 "Chemicals"卡在这种无序列表格式的右边？