创建一个两列无序列表 [英] Creating a two column Unordered List
问题描述
我希望制作一个类似于下面的两列无序列表,但也想知道如何整合加号的图像.我正在寻找一个没有 CSS3 优点的解决方案,以便它可以支持旧浏览器.
这是我网站的链接:
I am looking to make a two column Unordered list similar to below but would like to know how to integrate the image of the plus sign as well. I'm looking for a solution with no CSS3 goodness so it can support older browsers.
Here is a link to my website: http://jobspark.ca/job-listings/
I do not have much html for that section yet as I am using Squarespace Template.
This is a screenshot to explain where I am trying to insert the list
As a prototype, you can start with the following HTML:
<ul class="two-col-special">
<li>First Category</li>
<li>Second Category</li>
<li>Third Category</li>
<li>Fourth Category</li>
<li>Fifth Category</li>
</ul>
and apply the following CSS:
.two-col-special {
border: 1px dotted blue;
overflow: auto;
margin: 0;
padding: 0;
}
.two-col-special li {
display: inline-block;
width: 45%;
margin: 0;
padding: 0;
vertical-align: top; /* In case multi-word categories form two lines */
}
.two-col-special li:before {
content: '+';
padding: 5px;
margin-right: 5px; /* you can tweak the gap */
color: orange;
background-color: white; /* in case you want a color... */
display: inline-block;
}
The trick is to change the display type to inline-block
and set a width to some number around 45%.
The plus sign is added as a pseudo element before the list item.
If you text (categories) are similar in length, then this will give you a reasonably clean look.
Demo fiddle: http://jsfiddle.net/audetwebdesign/4PdQw/
这篇关于创建一个两列无序列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!