Question

我需要做的一个例子是在Techcrunch主页的顶部，它是可热点击项目的“HOT TOPIC”行，如下所示：

FOXCONN GOOGLE FACEBOOK DIASPORA的热门话题苹果未来

我查看了'ul'标签和'li'标签的CSS样式，我没有看到任何使用CSS的东西让我告诉浏览器“浏览器先生，这是一个无序的列表。当我浏览器先生，您通常会认为您通常会垂直堆叠ul列表项，请在此次显示列表项水平 - 谢谢。“

我没有在CSS中看到任何允许我告诉'ul'布置列表项水平的内容 - 所以下面的代码如何实现呢？

这是'ul'无序列表代码，它在Techcrunch页面上执行此操作：

<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>

将其制作出来！这就是我必须要做的事情 - 我根本没有漂浮。我不得不漂浮图像，这让我感到惊讶，但是嘿它有效我将继续使用它。这是代码。在此代码中，第二个列表项（即文本）显示在图像的右上角，从图像最上边缘的最顶部开始：

<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>

Answer 1

使列表显示为垂直的css位于：

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

浮动是一个相当困难的概念，我发现最好在A List Apart

上解释

隐藏列表项子弹的css位于：

li {
  list-style: none;
}

Answer 2

ul {list-style:none} li {display:inline}

li需要为display:inline或display:inline-block或float:left

Answer 3

您需要将float: left应用于列表中的每个项目。

Answer 4

有几种方法可以做到这一点。设置li{display:inline-block}是一个; li{float:left;}是另一个。

Answer 5

施加

#menu-hot-topic-menu li { display: inline; }

会使列表水平

如何制作水平布局？

5 个答案: