Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Display Unordered List in Two Columns?
In HTML, unordered lists are collections of items that do not have to be in any particular order. To list these items, we frequently use simple bullet points and that is why they are often known as bulleted lists. An unordered list begins with the <ul> tag and closes with a </ul> tag. The list items begin with the <li> tag and end with </li> tag.
The <ul>tag, which stands for unordered list, is the li tag's parent. This means that the <li>tag is the <ul>tag's child. Following is the syntax
<ul>List of Items</ul>
There can be 4 types of bulleted lists; disc, circle, square and none. This can be specified by the type attribute inside the <ul> tag or the CSS list-style-type property. The default appearance of an unordered list is as shown below.
Example
<!DOCTYPE html>
<html>
<head>
<title>An example of a simple unordered list</title>
</head>
<body>
<p>Vegetables</p>
<ul>
<li>Capsicum</li>
<li>Brinjal</li>
<li>Onion</li>
<li>Tomato</li>
</ul>
</body>
</html>
As we can see the list items appear in a single column by default. However, we can change this setting and display the list in two or more columns by using CSS styling properties.
Using the ‘column-width’ and ‘column-count’ Property
The ‘column-width’ property defines the ideal column width, specified by a
To create a versatile multi-column layout, we can use both column-count and column-width. The column-count specifies the maximum number of columns, whereas the column-width specifies the minimum width of each column. By combining these properties, the multi-column layout will automatically collapse to a single column at narrow browser widths, eliminating the need for media queries or other rules.
The ‘column-count’ Property
The ‘column-count’ property specifies the optimal number of columns into which the element's content should be flowed, expressed as an <integer> or with the keyword auto. If neither this value nor the column width is auto, it simply indicates the maximum number of columns that can be used. In contrast to column-width property, this property retains the number of columns regardless of browser width.
Example
In the example below, we will create an ordered list with two columns by specifying the number of columns using the ‘column-count’ property of CSS.
<!DOCTYPE html>
<html>
<head>
<title>How to Display Unordered List in Two Columns?</title>
<style>
ul {
column-count: 2;
column-gap:20px;
}
div{
background-color:seashell;
color:palevioletred;
border:2px solid mistyrose;
border-radius:10px;
height:180px;
width:520px;
padding:5px;
margin:10px;
}
li{
padding:2px;
}
</style>
</head>
<body>
<h4>Top Engineering Colleges in Hyderabad</h4>
<div>
<ul type="square">
<li>IIT Hyderabad</li>
<li>IIT Hyderabad</li>
<li>Jawaharlal Nehru Institute of Technology</li>
<li>Osmania University</li>
<li>Chaitanya Bharati Institute of Technology</li>
<li>VNR/ VJIET Hyderabad</li>
<li>Vasavi College of Engineering</li>
<li>Sreenidhi Institute of Technology</li>
<li>Gokaraju Rangaraju Institute of Technology</li>
<li>G. Nayarayanamma Institute of Technology</li>
</ul>
</div>
</body>
</html>
Using the ‘columns’ Property
The columns CSS shorthand property specifies the number of columns to use when drawing an element's contents, as well as the widths of those columns. This property is a shorthand for the CSS properties column-count and column width. It accepts column-count, column-width, or both properties.
columns: auto|column-width column-count;
‘Auto’ sets the column-width and column-count values to their browser default values.
Example
In the example below, we will create an ordered list with two columns by specifying the number of columns using the ‘columns’ property of CSS.
<!DOCTYPE html>
<html>
<head>
<title>How to Display Unordered List in Two Columns?</title>
<style>
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
div{
background-color:papayawhip;
color:saddlebrown;
border-radius:20px;
height:180px;
padding:5px;
width:550px;
}
li{
padding:2px;
}
</style>
</head>
<body>
<h4>Top Engineering Colleges in Hyderabad</h4>
<div>
<ul type="circle">
<li>IIT Hyderabad</li>
<li>IIT Hyderabad</li>
<li>Jawaharlal Nehru Institute of Technology</li>
<li>Osmania University</li>
<li>Chaitanya Bharati Institute of Technology</li>
<li>VNR/ VJIET Hyderabad</li>
<li>Vasavi College of Engineering</li>
<li>Sreenidhi Institute of Technology</li>
<li>Gokaraju Rangaraju Institute of Technology</li>
<li>G. Nayarayanamma Institute of Technology</li>
</ul>
</div>
</body>
</html>
765 Views
