Question

我需要制作一种类似this one的时间线，我得到的最好是垂直对齐项目：

CSS

ul {
       list-style-type: none;
       text-decoration: none;
       color: #000;
       background: none repeat scroll 0% 0% #EBEFF9;
       border: 1px solid #D9E4FF;
       border-radius: 4px;
       display: block;
       margin: 2px;
       padding: 3px;
       max-width:300px;
   }

h3 {
       color: #32ff12;
       background: #000000;
       max-width: 440px;
       border-radius: 4px;
    }

HTML

<h3>March</h3>
<ul>
    <li>1 a 3 - Fronteira</li>
</ul>
<ul>
    <li>10 a 13 -Belver</li>
</ul>
<h3>April</h3>
<ul>
    <li>1 a 3 - Silves</li>
</ul>
<ul>
    <li>10 a 13 -Porto</li>
</ul>

关于如何制作这个的任何想法？

Answer 1

您可以向div添加ul“包装器”，并将其设置为float: left;。类似于this。

<强> HTML

<div class="wrapper">    
<h3>March</h3>
    <!-- If you have to use a list, you can use it like this.
         Each <li> is an item of the list <ul> -->
    <ul> 
        <li>1 a 3 - Fronteira</li>
        <li>10 a 13 -Belver</li>
    </ul>
</div>
<div class="wrapper">    
<h3>April</h3>
    <ul>
        <li>1 a 3 - Silves</li>
        <li>10 a 13 -Porto</li>
    </ul>
</div>

<强> CSS

/* css reset */
* {
    margin: 0;
    padding: 0;
}

/* here you go */
.wrapper {
    float: left;
    margin-right: 12px;
    width: 200px;
}

h3 {
    color: #32ff12;
    background: #000000;
    border-radius: 4px;
    padding-left: 4px;
}

li {
    list-style-type: none;
    text-decoration: none;
    color: #000;
    background: none repeat scroll 0% 0% #EBEFF9;
    border: 1px solid #D9E4FF;
    border-radius: 4px;
    display: block;
    width: 100%;
    margin-top: 4px; 
}

Answer 2

将您的元素包装在浮动的div中可以帮助您。

.box {float: left; margin-right: 5px;}

完整示例：http://jsfiddle.net/6hwAT/

Answer 3

您可以右键点击that page并选择View Page Source菜单（如果您使用的是Chrome）或其他浏览器中的类似菜单。然后你可以看到该页面的开发人员在内部提供的CSS和Javascript的源代码。例如，样式时间轴的css代码是：

/* Timeline styling */#timeline {    margin: 10px 0 8px 0;    padding: 20px;    overflow: auto;    border: 2px solid #D9E4FF;   font-size: 11px;    cursor: move;   background: url("images/vsewall.jpg") top right no-repeat;}.tl-events {    width: 9600px; /*210 per column*/    list-style: none;    padding: 0;    margin: 0;}.tl-events li {    float: left;    width: 200px;    margin-right: 10px;}.tl-events ul {    list-style: none;    margin: 0;    padding: 0;}.tl-events ul li a {    text-decoration: none;    color: #000;    background: #EBEFF9;    border: 1px solid #D9E4FF;    -moz-border-radius: 4px;    border-radius: 4px;    display: block;    margin: 2px;    padding: 3px;}.tl-events ul li a:hover,.tl-events ul li a:focus {    outline: 0;    background: #C2CCE4;    border: 1px solid #B0BACF;}.tl-events ul li.highlight a {    background-color: #FFFF99;}.tl-events li h3.next {  background-color: #EBEFF9;  font-size: 120%;    padding: 3px 3px 3px 12px;  margin-right: -20px;    margin-left: 10px;  background-image: url("images/arrow.png");  background-position: 103% 50%;  background-repeat: no-repeat;   overflow: hidden;

我从您提到的链接中复制并粘贴了此代码。

Answer 4

你应该用UL个浮动的DIV元素包裹你的.float-left { float: left; margin-right: 12px; } ul { list-style-type: none; text-decoration: none; color: #000; background: none repeat scroll 0% 0% #EBEFF9; border: 1px solid #D9E4FF; border-radius: 4px; display: block; margin: 2px; padding: 3px; max-width:300px; } h3 { color: #32ff12; background: #000000; max-width:440px; border-radius: 4px; }，这样你就可以从列中获取信息。

在jsFiddle查看我的解决方案：http://jsfiddle.net/ynevet/cJDT9/

<强> CSS：

<div class="float-left">
<h3>March</h3>
    <ul>
        <li>1 a 3 - Fronteira</li>
    </ul>
    <ul>
        <li>10 a 13 -Belver</li>
    </ul>
</div>
<div class="float-left">
<h3>April</h3>
    <ul>
        <li>1 a 3 - Silves</li>
    </ul>
    <ul>
        <li>10 a 13 -Porto</li>
    </ul>
</div>

<强> HTML：

{{1}}

Answer 5

您需要将每个月的标题及其随附列表包装在容器中，将宽度应用于此容器并将其浮动到左侧。

由于月份也可以被视为列表，因此在语义上有一个有序列表是有意义的，每个月作为列表项（构成容器），然后嵌套在每个有序列表项中的无序列表，例如：

<ol>
    <li>
        <h3>March</h3>
        <ul>
            <li>1 a 3 - Fronteira</li>
            <li>10 a 13 -Belver</li>
        </ul>
    </li>
    <li>
        <h3>April</h3>
        <ul>
            <li>1 a 3 - Silves</li>
            <li>10 a 13 -Porto</li>
        </ul>
    </li>
</ol>

然后是CSS：

ol > li {
    float: left;
    width: 300px;
    list-style: none;
}

ul {
    list-style-type: none;
    text-decoration: none;
    color: #000;
    background: none repeat scroll 0% 0% #EBEFF9;
    border: 1px solid #D9E4FF;
    border-radius: 4px;
    margin: 2px;
    padding: 3px;
}

h3 {
    color: #32ff12;
    background: #000000;
    border-radius: 4px;
}

请参阅jsfiddle

如何水平对齐未排序的列表？

5 个答案: