第一个列表项(<li>)在谷歌浏览器中浮动

     2023-03-05     301

关键词:

【中文标题】第一个列表项(<li>)在谷歌浏览器中浮动【英文标题】:First list item (<li>) floating right in google chrome 【发布时间】:2011-03-17 20:23:12 【问题描述】:

我在使用谷歌浏览器时遇到问题。问题是第一个列表项的项目符号向右浮动,而所有其他列表项的项目符号在左侧正确对齐。

这是我的代码:

 <div class="window_sub_title2">The Interface</div>          
 <ul>
     <li>Toolbox </li>
     <li>Context Menus </li>
     <li>Tool Options Bar </li>
     <li>Menu Bar </li>
     <li>Palette Well </li>
     <li>Rulers </li>
     <li>Guides and grid </li>
     <li>Navigating in Photoshop </li>
     <li>Shortcuts </li>
     <li>File  Browser </li>
 </ul>

这是它在 chrome 中的外观:http://www.flickr.com/photos/41695354@N08/4807767137/

这里是实际的link。

【问题讨论】:

你能提供一些示例代码来演示这种行为吗? 【参考方案1】:

这个 css 为我解决了这个问题:

li 
    clear:left;

【讨论】:

【参考方案2】:
li 
list-style-position: inside;

为我工作!

【讨论】:

【参考方案3】:

使用 CSS 手动覆盖项目符号间距和填充的所有默认值。

【讨论】:

【参考方案4】:

可以在here in the bug reports 和一个测试用例here 中找到它的背景。仅当您将 float:left 应用于该块时才会发生这种情况。建议的修复方法是使用clear:left;,但您可能需要小心定位,以免意外清除没有错误的元素(如菜单)。

【讨论】:

【参考方案5】:

我遇到过这种问题。我通过这样做解决了这个问题。请仔细查看代码样式。希望对你有帮助。

<ul>
     <li>Toolbox </li><li>
         Context Menus</li><li>
         Tool Options Bar </li><li>
         Menu Bar </li><li>
         ------ 
        File  Browser </li>
 </ul>

【讨论】:

html5第二章列表和表格和媒体元素

列表:(1)什么是列表?列表就是信息资源的一种展示形式。(2)无序列表:语法:<ul><li>第1项</li><li>第2项</li><li>第3项</li></ul>(3)有序列表:语法:<ol><li>第1项</li><li>第... 查看详情

怎么可以改变li标签的背景颜色

...<ul><li>Coffee</li><li>Milk</li></ul>浏览器显示如下:·Coffee·Milk列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。 查看详情

2.列表标签

...者文字的做法是不被允许的<li>与</li>之间相当于一个容器,可以容纳所有元素无序列表会带自己的样式属性,但在实际使用时,我们会使用CSS来设置有序列表:即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义,... 查看详情

如何将列表项显示为列?

...】:2012-09-0204:31:41【问题描述】:我正在尝试构建我的第一个响应式布局。我想在垂直线上显示列表项,具体取决于宽度。<divstyle="height:800px;"><ul><li>1</li><li>2</li><li>3&l 查看详情

jquery使用第n个子元素将列表项分成两部分

/*<divid="latest_left"><ul><li>1<li><li>1<li><li>1<li><li>1<li></ul></div><divid="latest_right"><!- 查看详情

在谷歌浏览器中播放 avi 视频

】在谷歌浏览器中播放avi视频【英文标题】:Playavivideosingooglechrome【发布时间】:2017-03-2207:32:17【问题描述】:如何在chrome中播放avi视频?我的代码是<center><videocontrols><sourcesrc="plaque.avi"type="video/avi"></source></v... 查看详情

html列表

HTML支持有序、无序和定义列表:HTML列表有序列表第一个列表项第二个列表项第三个列表项无序列表列表项列表项列表项在线实例无序列表本例演示无序列表。有序列表本例演示有序列表。(可以在本页底端找到更多实例。)HTML... 查看详情

单击列表末尾的图标删除动态创建的 <li> 列表项

...ofthelist【发布时间】:2012-12-1820:45:22【问题描述】:我有一个使用jquery动态创建的&lt;li>列表。该列表有一个输入字段和一个减号图标以删除列表项。下面是向列表中插入新项目的示例代码 查看详情

在同一个列表项中正确标记多个嵌套列表

】在同一个列表项中正确标记多个嵌套列表【英文标题】:Correctlymarkingupmultiplenestedlistswithinthesamelistitem【发布时间】:2022-01-0205:23:03【问题描述】:在GitHub.md文件中,我正在尝试编写相当于:<ul><li>Thisisalistitem</li>&... 查看详情

列表标签

...字的做法是不被允许的。3、<li>与<li>之间相当于一个容器,可以容纳所有元素。4、无序列表会带有自己的样式属性,但在实际使用上,我们使用CSS来设置。二、有序列表有序列表即为有排列顺序的列表,其各个列表项... 查看详情

html列表

HTML列表无序列表-ul<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul>列表项1列表项2列表项3有序列表-ol<ol><li>列表项1</li><li>列表项2</li><li>列表 查看详情

列表表格媒体和元素

...t;li>列表项2</li> </ol> 特性: 1.有顺序,每一个li独占一行2.默认每一个li前有顺序标识 2.无序列表 <ul> <li>列表项1</li> 查看详情

css中first-child是啥意思

css2里的伪类均摊符,意思是:匹配父元素的第一个子元素你可以在css手机里可以查到这个伪类选择符比如:<ul><li>列表项一</li><li>列表项二</li><li>列表项三</li><li>列表项四</li></ul>在... 查看详情

列表,表格与媒体元素基础

...t;li>列表项2</li> </ol> 特性: 1.有顺序,每一个li独占一行2.默认每一个li前有顺序标识 2.无序列表 <ul> <li>列表项1</li> 查看详情

为啥 ul 列表中的第一个类型不起作用

】为啥ul列表中的第一个类型不起作用【英文标题】:WhyFirst-of-typeinullistisnotworking为什么ul列表中的第一个类型不起作用【发布时间】:2016-06-1308:10:10【问题描述】:代码ula:first-of-typecolor:red;<ul><li>Item1</li><li>Item... 查看详情

选择列表中的第一个嵌套子项,但不选择子项

】选择列表中的第一个嵌套子项,但不选择子项【英文标题】:Selectfirstnestedchildinlistbutnotsubchilds【发布时间】:2014-11-1107:01:41【问题描述】:我有一个无序列表,例如:<ul><li>Elementone<ul><li><a>Elementtwo</a&g... 查看详情

对齐中心css中的单个列表项(代码片段)

我在Reactjs中创建了一个带有四个元素的导航栏。这些项是一个简单的无序列表,其中一些css使用flexbox来对齐它们。<ul><li>One</li><li>Two</li><li>Three</li><li>Four</li><ul/>我想要实现的是:当... 查看详情

css3第一个孩子在列表项的锚点(代码片段)

<styletype="text/css">#featureda:first-childbackground-color:yellow;</style><divid="featured"><ulclass="ui-tabs-nav"><li><ahref="#"><span>test1</span> 查看详情