- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试格式化水平列表,以便图像位于 ul
的左侧。这是我的目标的想法(绿色是图像,x
、y
、z
标签用于帮助指代部分每个部分(如果有帮助)):
但我似乎无法弄清楚如何将我的图像与 ul
的文本部分“分开”。
HTML:
<span class='row'>
<ul class = 'top-ul'>
<ul id="menu">
<li><h2><u>Colby Abbott</u></h2></li><br>
<li><p id="email">Enos.Goyette@hotmail.com</p></li><br>
<li><p id="phoneNumber">360.751.0915</p></li>
<li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
</ul>
<ul id="menu">
<li><h2><u>Jamaal Powlowski</u></h2></li><br>
<li><p id="email">Stan.Roberts48@gmail.com</p></li><br>
<li><p id="phoneNumber">(057) 629-2042 x2604</p></li>
<li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
</ul>
<ul id="menu">
<li><h2><u>Ubaldo Bode</u></h2></li><br>
<li><p id="email">Alia.Lynch52@gmail.com</p></li><br>
<li><p id="phoneNumber">881.886.7822 x87177</p></li>
<li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
</ul>
<ul id="menu">
<li><h2><u>Herbert Bailey</u></h2></li><br>
<li><p id="email">Arnaldo73@gmail.com</p></li><br>
<li><p id="phoneNumber">1-620-830-6732</p></li>
<li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
</ul>
</ul>
<br>
</span>
<span class='row'>
<ul>
<ul id="menu">
<li><h2><u>Alana Legros</u></h2></li><br>
<li><p id="email">John.Nienow37@hotmail.com</p></li><br>
<li><p id="phoneNumber">299.276.2872 x90430</p></li>
<li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
</ul>
<ul id="menu">
<li><h2><u>Gertrude Jacobs</u></h2></li><br>
<li><p id="email">Erna_Krajcik94@gmail.com</p></li><br>
<li><p id="phoneNumber">(335) 097-2437</p></li>
<li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
</ul>
<ul id="menu">
<li><h2><u>Ellis Homenick</u></h2></li><br>
<li><p id="email">Ezra_Stamm76@yahoo.com</p></li><br>
<li><p id="phoneNumber">(391) 333-5140</p></li>
<li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
</ul>
</ul>
</span>
CSS:
ul {
width:100%;
table-layout: fixed;
}
ul ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
table-layout: fixed;
border: 3px red solid;
width:20%;
}
li img{ /* I want to move this to the right of the ul it's in somehow */
display: inline;
border: 3px solid green;
}
p {
margin:0px;
padding-left: 10px;
}
.row{
width: 100%;
}
.row li{
display:inline-block;
}
但事实证明like this .
我怎样才能“分解”图像,使文本保持居中(或顶部)对齐,图像在右边;同时还让每个 ul
周围的边框更紧?
编辑:我是 html/css 的新手,所以如果有更好的格式化方法,请告诉我。根据下面的内容,有人提到使用列表来执行此操作……所以上面是我的尝试,但很可能我没有想到其他更好的方法。
FWIW,我尝试将其作为表格来执行,但是 was recommended to use a list instead
最佳答案
如果你真的坚持使用你的语义,这是我可以想出的解决方案,对你的代码进行尽可能少的更改。
<ul class="menu"> #change id to class
<li> #placed all the info you want on the left to a single li element
<h2><u>Colby Abbott</u></h2>
<p id="email">Enos.Goyette@hotmail.com</p>
<p id="phoneNumber">360.751.0915</p>
</li>
<li> #right side
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</li>
</ul>
ul.menu {
border: 3px red solid;
width: 400px;
}
ul.menu li {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float:left;
}
ul.menu li img{
display: inline;
border: 3px solid green;
float: right;
width: 100px;
}
然后对所有部分重复此操作。
旁注:我还删除了 <br>
s 在你的 li
的末尾元素,因为它们是不必要的。我强烈建议阅读 Flexbox因为它完全符合您的要求。
关于html - 水平列表格式 - 将 ul 与图像分开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48553878/
有没有办法使用 Clojure format(基于 java.util.Formatter)或 cl-format(基于 Common Lisp 的format) 以编程方式设置空格填充?如果您事先知
我正在尝试创建一个用户实体以及数据/文件(pdf格式)。上传并保存到数据库很好,但是当我让用户进入 postman 时尝试发送获取请求方法,然后在数据字段中显示一些糟糕的数据,而且我无法在数据库中看到
我必须将值为 {"STX","ETX"} 的普通字符串数组转换为十六进制值,并且我应该根据 http://www.asciitable.com/ 得到 {2,3} . 最佳答案 听起来你想要一个 Ma
我想格式化我的代码,但不确定哪种格式类型最适合我的项目需要。 我发现仅对于 dart 和 flutter 项目(我都有),有不止一个选项可用于格式化编程语言/框架中预先构建的代码。 Dart : da
我已经尝试了多个代码,例如这样 Sub DateFixer() Application.ScreenUpdating = False Application.Calculation =
SolrQuery query = new SolrQuery(); query.setQuery("*:*"); query.add("wt","csv"); server.query(query)
我有一个包含多个字符串的数据库,我从查询中获取了这些记录,并且我在 QString 中收到了这种格式的数据: "Mon, 13 Nov 2017 09:48:45 +0000" 所以,我需要根据文化来
我有一个 Delphi 2007 DBGrid,我想让用户以更新的 Excel 格式 (OOXML) 保存它,但我的标准是用户不需要安装 Excel。有没有人知道任何已经这样做的组件?是的,我已经搜索
我正在我们的普通 html 站点旁边创建一个移动站点。使用 rails 3.1。移动站点在子域 m.site.com 中访问。 我已经定义了移动格式(Mime::Type.register_alias
我正在尝试使用 xmlstarlet 格式化 xml 文件,但我不想创建新的 xml 文件。 我试过了 xmlstarlet fo --inplace --indent-tab --omit-decl
我在 A 列中有一个带有文本的电子表格。 例如 A1=MY TEXT1 A2=MY TEXT2 A3=MY TEXT3 A4=MY TEXT4 A5=MY TEXT5 我想在文本的前后添加撇号 结果是
我想做一些源代码转换(自动导入列表清理),我想保留注释和格式。我听说过一些关于解析器这样做的事情,我认为是 ghc 解析器。 看起来我可以通过从文件中提取内容来使用 hs-src-exts Langu
我在 Excel 中工作,我想根据另一张表中的列表找出一张表中是否有匹配项。 我已将值粘贴到列表中,并希望从另一张表中返回它们的相应值。包含字母和数字的单元格可以正常工作(例如:D5765000),但
我有一个 DurationField在我的模型中定义为 day0 = models.DurationField('Duration for Monday', default=datetime.time
我正在为我的应用程序开发 WMI 查询。它需要为给定的 VID/PID 找到分配的虚拟 COM 端口。使用 WMI Code Creator 我发现...... 命名空间:root\CIMV2 类:W
我试图弄清楚如何使用 NSTextList,但除了 this SO question 之外,在网上几乎没有找到有用的信息。和 the comment in this blog . 使用这个我已经能够创
我要查询all_objects表在哪里last_ddl_time='01 jan 2010'但它拒绝日期格式... 任何机构给我查询的确切格式? 最佳答案 正如 AKF 所说,您应该使用 Trunc除
我试图在我的应用程序中实现聊天功能。我使用了 2 个 JEditorPane。一个用于保存聊天记录,另一个用于将聊天发送到前一个 JEditorPane。 JEditorPane 是 text/h
我在大学里修了一个编译器类(class),内容非常丰富,很有趣,尽管也很多工作。既然给了我们要实现的语言规范,所以我学不到的一件事就是语言设计。我现在正在考虑创建一种有趣的简单玩具语言,以便我可以玩耍
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。 想改善这个问题吗?更新问题,以便将其作为on-topic
我是一名优秀的程序员,十分优秀!