html - 如何使 ul 水平布局？-6ren

html - 如何使 ul 水平布局？

转载作者：行者123 更新时间：2023-11-28 15:49:47

24

4

在 Techcrunch 主页的顶部可以看到我需要做的一个例子，它是可点击元素的“热门话题”行，如下所示:

热门话题 APPLE ANDROID FUTURE OF FOXCONN GOOGLE FACEBOOK DIASPORA

参见 http://techcrunch.com/ .

我查看了 'ul' 标签和 'li' 标签的 CSS 样式，但我没有看到任何使用 CSS 的东西可以让我告诉浏览器“浏览器先生，这是一个无序列表。虽然我意识到，浏览器先生，您通常垂直堆叠 ul 的列表项，这次请水平显示列表项——谢谢。”

我在 CSS 中没有看到任何允许我告诉“ul”以水平布置列表项的内容——那么下面的代码是如何做到这一点的

这是在 Techcrunch 页面上执行此操作的“ul”无序列表代码:

<div class="hot-topics-container">
<h4>**Hot topics**</h4>
<ul id="menu-hot-topic-menu" class="hot-topics">

    <li id="menu-item-398682" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-398682"><a href="http://techcrunch.com/tag/apple/">**Apple**</a></li>
    <li id="menu-item-394815" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-394815"><a href="http://techcrunch.com/tag/android/">**Android**</a></li>
    <li id="menu-item-399998" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-399998"><a href="http://techcrunch.com/tag/future-of-foxconn/">**Future Of Foxconn**</a></li>
    <li id="menu-item-398687" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-398687"><a href="http://techcrunch.com/tag/google/">**Google**</a></li>
    <li id="menu-item-398668" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-398668"><a href="http://techcrunch.com/tag/facebook/">**Facebook**</a></li>
    <li id="menu-item-435062" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-435062"><a href="http://techcrunch.com/tag/diaspora/">**Diaspora**</a></li>
</ul>               
</div>

我尝试使用 li float:left 如下，但没有改变。

<head>
<style type="text/css">
 li{float:left;}
</style>
</head>

<ul>
<li>
    <a href="http://localhost/mysite/landingpage.htm">
    <img src="http://localhost/mysite/someImage.png"
     alt="http://localhost/mysite/someImage.png"
     /img>
   </a>
</li>
<li>
    This text needs to appear to the right of the 1st list item
</li>
</ul>

想通了，伙计们!这是我必须做的——我根本没有漂浮 li。我不得不 float image，这让我很惊讶，但嘿，它有效，我会接受它。这是代码。在这段代码中，第二个列表项，即文本，出现在图像的最右边，从图像最上边缘的最顶部开始:

<head>
  <style type="text/css">
   #horizUL1
   {
      list-style:none;  /* turns off the 'bullets' for this list type */
   }    

   #horizListImg
   {
      float:left;
   }
  </style>
</head>

<ul id="horizUL1">
<li>
    <a href="http://localhost/mysite/landingpage.htm">
    <img id="horizListImg" src="http://localhost/mysite/someImage.png"
     alt="http://localhost/mysite/someImage.png"
     /img>
   </a>
</li>
<li>
    This text needs to appear to the right of the 1st list item
</li>
</ul>

最佳答案

让列表垂直显示的css在:

.module-header .hot-topics li {
  float: left;
}

float 是一个相当困难的概念，我发现在 A List Apart 上有最好的解释。

隐藏列表项元素符号的css在:

li {
  list-style: none;
}

关于html - 如何使 ul 水平布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8262980/

24

4

0

文章推荐： ios - Swift 图标角标(Badge)编号感叹号

文章推荐： jquery - DIV 位置固定，内部内容重叠

文章推荐： css - class 和 id css 属性

jQuery:仅选择 ul，而不选择 ul ul
我正在尝试使用 jQuery 来提交一个基本的 Accordion 样式菜单。这是菜单: http://www.cybart.com/bscg/ 这是为其提供 Accordion 功能的代码片段:
html - 增加嵌套 (ul ul ul li) 下拉导航列表项的宽度
这是我的网站: http://www.simply-a-christian.com/index.html 在导航栏上，如果您移动到: 信念玛丽安教义您可以看到每个 Marian Dogma(列出了
jquery - 当 ul ul 活跃时 ul parent 移动
这可能是一个很容易回答的问题，但是，我找不到解决方案。我已经建立了一个非常简单的菜单，每当我将鼠标悬停在 ul 父项上时，它的子项 ul ul 就会变得可见。基本上它是有效的，但 parent 让位于
HTML 下拉菜单 : "nav ul ul ul li" Too Low
这是一张图片: 问题是(你可以看到):“页面”按钮太低，无法点击。我想要的是它应该靠近“联系人”。现在是代码: HTML Home About
jquery - 如何在不破坏每个

首页

博学

6Ren·AI

商城

html - 如何使 ul 水平布局？