html - 将 Div 与元素符号列表对齐-6ren

html - 将 Div 与元素符号列表对齐

转载作者：太空宇宙更新时间：2023-11-04 08:48:05

25

4

我试图让我的元素符号在 div 图像旁边正确对齐。

这是我的 fiddle 链接:https://jsfiddle.net/tzhvdpj7/

从该示例中，您可以看到我的最后一组要点远低于其他两个相邻的要点。

HTML:

<body>
<img src="http://luvit.xoom.it/wordpress/wp-content/uploads/2012/02/Kabokov-INGO-MAURER-210x564.jpg" alt="Lamp" class="right" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<br>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<br>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 


<p>&nbsp;</p>
<p>&nbsp;</p>

<div style="float: left; width: 33%;">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<div style="float: left; width: 33%;">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<div style="float: right; width: 33%;">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<br>
</ul>
</div>

CSS:

.right {
   float: right;
   padding: 0px 0px 20px 30px;
}

.p {
   text-indent: 30pt;
}

有人帮忙吗？一直卡在这上面..

最佳答案

你应该让 div 更小，我把宽度设为 28%，但你可以改变它。

.right {
  float: right;
  padding: 0px 0px 20px 30px;
}

.p {
  text-indent: 30pt;
}

<body>
  <img src="http://luvit.xoom.it/wordpress/wp-content/uploads/2012/02/Kabokov-INGO-MAURER-210x564.jpg" alt="Lamp" class="right" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <br>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <br>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


  <p>&nbsp;</p>
  <p>&nbsp;</p>

  <div style="float: left; width: 28%;">
    <ul>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
    </ul>
  </div>
  <div style="float: left; width: 28%;">
    <ul>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
    </ul>
  </div>
  <div style="float: left; width: 28%;">
    <ul>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <br>
    </ul>
  </div>

关于html - 将 Div 与元素符号列表对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43630752/

25

4

0

文章推荐： c - 没有用于设置控制台窗口大小的 winapi 函数？

文章推荐： python - Pandas 如何截断分钟，秒 pandas.tslib.Timestamp

文章推荐： java - JML:如何指定具有新月形元素的数组的要求？

文章推荐： python - 按行打印字典

python - 在字符串中找到左半部分的计数(符号)=右半部分的计数(符号)的索引？
给定一个字符串，例如 s="##$$$#"，我如何找到索引之前的“#”符号数等于“”数的索引$"符号在索引之后？示例:如果 s="##$$$#"，则输出将为 2。解释:在索引 2 之前我们有 2
JavaScript 符号
在本教程中，您将借助示例了解 JavaScript 符号。 JavaScript 符号 JavaScript ES6 引入了一种新的原始数据类型，称为 Symbol（符号）。符号是不可变的（不能更改）
Haskell >.> 符号
在“函数编程的工艺”一书中，符号 '>.>' 将函数连接在一起，与 '.' 的方向相反。但是当我使用 ghci 实现它时，它显示了超出范围的错误 '>.>'。为什么？它是不再使用的旧符号吗？最佳答案
JavaScript $ 符号？
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
从字符串中删除双引号\"符号
我需要从向量中删除 \"。这是我的数据: data <- c("\"https://click.linksynergy.com/link?id=RUxZriH*PWc&offerid=323058.1
正则表达式模式不支持 # 符号
我在 Nginx 配置中使用正则表达式来捕获文件 URL，但如果文件 URL 包含 # 符号，正则表达式模式将不会捕获它。这里是nginx的配置部分。 location ~ ^/p/(?[\w\-=
highcharts & 符号
如何使 & 符号在此图表的第一组条形/列下正确显示: http://jsfiddle.net/VxbrK/2/ 应该是“Apples & Oranges”而不是“Apples & Oranges”。
Verilog ** 符号
**在verilog中是什么意思？我为测试台提供了以下逻辑 localparam NUM_INPUT_BITS = 1; localparam NUM_OUTPUT_BITS
Java正则表达式电子邮件替换所有空格和 "[at]"符号
我有一个使用正则表达式来验证电子邮件地址的方法。 public String searchFormail(String searchWord) { Pattern pattern = Patt
Python正则表达式将字符串拆分为数字和文本/符号
我想将一个字符串拆分为数字部分和文本/符号部分我当前的代码不包含负数或小数，并且表现得很奇怪，在输出的末尾添加了一个空列表元素 import re mystring = 'AD%5(6ag 0.33-
javascript从数组中随机数返回单个字母/符号
我有一些代码需要从数组中选择一个随机字符串，但它一直返回单个字母或数字。如何解决这个问题？ var name = ["Yayek", "Vozarut", "Gezex",
Python 符号？
我刚开始使用 Python，我在考虑应该使用哪种表示法。我读过 PEP 8关于 Python 符号的指南，我同意那里的大多数内容，除了函数名称(我更喜欢混合大小写风格)。在 C++ 中，我使用匈牙利
C# 符号
在用 C# 编写代码时，我错误地在 if 语句中的变量前添加了一个符号(而不是感叹号)。 bool b = false; if (@b) { } 我很惊讶它编译成功，没有任何错误。我想知道:上面的代
IOS如何替换电话号码中间4位为＂-＂符号
本文实例为大家分享了特殊字符替换电话号码中某一部分的方法，ios利用-号替换电话号码中间四位，供大家参考，具体内容如下 1、效果图 2、代码 rootviewcontroll
Python sympy 符号
当我使用“x”和“z”作为符号时，这段代码没有问题: from sympy import * x, z = symbols('x z') y = -6*x**2 + 2*x*z**0.5 + 50*x
从文本中删除标点符号(符号 & 除外)
我需要从文本中删除标点符号: data <- "Type the command AT&W enter. in order to save the new protocol on modem;"
r - 如何在数字中添加$符号
我有几个数字是 numeric 类。下面的例子。 df = c(12974,12412,124124,124124,34543,4576547,32235) 现在我想在每个数字前添加 '$' 符号而不
传说中的 Highcharts 符号
我有一个 highcharts 图例，其中符号以不同的大小显示，因为它们在实际图表中的大小不同。不幸的是，当数据点的大小增加时，它们也会在图例中增加。无论数据点大小如何，我都希望图例符号保持相同的大小
r - 如何在R中输入+-符号
我需要使用包含平均值+-SD的标题。到目前为止，我只能得到以下信息: "Mean +- SD or N (%)" [1] "Mean +- SD or N (%)" 如何直接使用“+-”符号？您知道一
URL 和 & 符号
使用 XSLT 和 XPath 1.0，我有一个要转义的字符串以用于 URL，例如: one word & another 因此，描述元素的 text() 应该进行 URL 转义。我该怎么做

首页

博学

6Ren·AI

商城

html - 将 Div 与元素符号列表对齐