html - 如何通过css和html创建一个连续三列的列表？-6ren

html - 如何通过css和html创建一个连续三列的列表？

转载作者：太空宇宙更新时间：2023-11-03 21:19:47

我正在制作一个与样本相似的列表

我尝试制作 css 代码来构建上面的列表样式。但是，我的输出看起来不像。你能帮我看看我的css和html并帮我获取吗？

这是我当前的输出

这是我试过的。您可以在 here 查看在线演示

<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
        <div id="view"> 
                <div id="container">
                    <ul>
                        <!-- row 01 -->
                        <a href="#"><li class="clearfix">
                                <h2>Wordpress desiger</h2>
                                <p class="desc">Wordpress and beyond </p>  
                                <p class="location">NY.</p>
                                <p class="time">Jan.</p>
                                <span class="jobtype">Part time</span>
                        </li></a>

                        <!-- row 02 -->
                        <a href="#"><li class="clearfix">

                            <h2>CEO</h2>
                            <p class="desc">Think different</p>
                            <p class="location">Denver</p>
                            <p class="time">Feb.</p>
                            <span class="jobtype">Contract</span>
                        </li></a>

                        <!-- row 03 -->
                        <a href="#"><li class="clearfix">                            
                            <h2>Interactive desiger</h2>
                            <p class="desc">Designer.</p>  
                            <p class="location">NY.</p> 
                            <p class="time">May</p>
                            <span class="jobtype">Full time</span>
                        </li></a>

                    </ul>
                </div>
            </div>



</div>   
</body>
</html>

我的 CSS 代码是

body{
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    overflow-x: hidden;
}
body.is-ontop{
    margin-top: 53px;
}
h1{
    font-size: 44px;
}
h2{
    font-size: 20px;
}
h3{
    font-size: 18px;
}
a{
    color: #666;
}
a:hover{
    color: #ff3366;
    text-decoration: none;
    transition: all 0.25s;
}
a:focus{
    text-decoration: none;
}
.bold{
  font-weight: bold;
}  
a { text-decoration: none; }

/** content display **/
#view { display: block; padding: 0; margin: 0; height:600px;  overflow:hidden; overflow-y:scroll;}
#container { display: block; margin-top: 10px; }
#container ul { }
#container ul a li { 
    display: block;
    width: 100%;
    border-bottom: 1px solid #b9b9b9;
    border-top: 1px solid #f7f7f7;
    background: #FFF;

}

#container ul a { display: block; position: relative; width: 100%; }
#container ul li h2 { font-size: 2.1em; line-height: 1.3em; font-weight: normal; letter-spacing: -0.03em; padding-top: 4px; color: #55678d; }
#container ul li p.desc { color: #555; font-family: Arial, sans-serif; font-size: 1.3em; line-height: 1.3em; white-space: nowrap; overflow: hidden; }
#container ul li p.location { color: #555; font-family: Arial, sans-serif; font-size: 1.3em; line-height: 1.3em; white-space: nowrap; overflow: hidden; }
#container ul li p.time { color: #555; font-family: Arial, sans-serif; font-size: 1.3em; line-height: 1.3em; white-space: nowrap; overflow: hidden; }
}#container ul li .jobtype { position: absolute; bottom: 0px; left: 0px; font-size: 1.2em; font-weight: bold; color: #6ea247; }  
#container ul a:hover li h2 { color: #7287b1; }
#container ul a:hover li p.desc { color: #757575; }    
#container ul a:hover li {
background: #E8EAEA;
}

最佳答案

不要使用表格。现在是 2016 年。也只是一个指针，a 标签通常在 li 标签内。

ul a {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

ul a .information {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

h2, .job-type {
  margin-top: 15px;
  margin-bottom: 0;
}

<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
        <div id="view"> 
                <div id="container">
                    <ul>
                        <!-- row 01 -->
                        <a href="#"><li class="clearfix">
                                <h2>Wordpress desiger</h2>
                                <div class="information">
                                <p class="desc">Wordpress and beyond </p>  
                                <p class="location">NY.</p>
                                <p class="time">Jan.</p>
                                </div>
                                <span class="jobtype">Part time</span>
                        </li></a>

                        <!-- row 02 -->
                        <a href="#"><li class="clearfix">

                            <h2>CEO</h2>
                            <div class="information">
                            <p class="desc">Think different</p>
                            <p class="location">Denver</p>
                            <p class="time">Feb.</p>
                            </div>
                            <span class="jobtype">Contract</span>
                        </li></a>

                        <!-- row 03 -->
                        <a href="#"><li class="clearfix">                            
                            <h2>Interactive desiger</h2>
                            <div class="information">
                            <p class="desc">Designer.</p>  
                            <p class="location">NY.</p> 
                            <p class="time">May</p>
                            </div>
                            <span class="jobtype">Full time</span>
                        </li></a>

                    </ul>
                </div>
            </div>



</div>   
</body>
</html>

关于html - 如何通过css和html创建一个连续三列的列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38508796/

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何通过css和html创建一个连续三列的列表？