CODEWITHSUNDEEP
htmlcss
iceiceicy
iceiceicy

Reputation: 744

List items in 2 columns with straight border

I have a list item. What I'm trying to achieve is when in mobile view, I want the list to show 2 items in a row.

So, I set the UL tag to columns: 2. It works perfectly, but the downside is since those items have border-top property, they will be a line gap on the middle.

May I know is there a way for me to make the border in full width without a gap and without changing to another html tag (since this list format is generated from WordPress widget)

Here an example of the problem.

ul {
  display: block;
  columns: 2;
}

li {
  border-top: 1px solid #e9e9e9;
  list-style: none;
}
<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
<li>TEST 4</li>
<li>TEST 5</li>
<li>TEST 6</li>
<li>TEST 7</li>
<li>TEST 8</li>
</ul>

Upvotes: 4

Views: 388

Answers (4)

Jithin Raj P R
Jithin Raj P R

Reputation: 6797

You can just use column-gap: 0; to your ul

ul {
  display: block;
  -webkit-columns: 2;
  /* Chrome, Safari, Opera */
  -moz-columns: 2;
  /* Firefox */
  columns: 2;
  -webkit-column-gap: 0;
  /* Chrome, Safari, Opera */
  -moz-column-gap: 0;
  /* Firefox */
  column-gap: 0;
}

li {
  border-top: 1px solid #e9e9e9;
  list-style: none;
}
<ul>
  <li>TEST 1</li>
  <li>TEST 2</li>
  <li>TEST 3</li>
  <li>TEST 4</li>
  <li>TEST 5</li>
  <li>TEST 6</li>
  <li>TEST 7</li>
  <li>TEST 8</li>
</ul>

Always use Webkit prefixs with the new CSS styles for better support

Hope this was helpfull.

Upvotes: 1

Md. Abu Sayed
Md. Abu Sayed

Reputation: 2486

You Can Try Another Way to use flex box

ul {
  display:flex;
  flex-wrap:wrap;
  box-sizing: border-box;
}

li {
  width:50%;
  padding: 5px 15px 5px 5px;
  border-top: 1px solid black;
  list-style: none;
  font-size: 15px;
  box-sizing: border-box;
}
<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
<li>TEST 4</li>
<li>TEST 5</li>
<li>TEST 6</li>
<li>TEST 7</li>
<li>TEST 8</li>
</ul>

Upvotes: 1

syntax-punk
syntax-punk

Reputation: 4570

Try to use column-gap: 0;. If I understood you correctly, this is what you need.

ul {
  display: block;
  columns: 2;
  column-gap: 0;
}

li {
  border-top: 1px solid #e9e9e9;
  list-style: none;
}
<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
<li>TEST 4</li>
<li>TEST 5</li>
<li>TEST 6</li>
<li>TEST 7</li>
<li>TEST 8</li>
</ul>

Upvotes: 1

לבני מלכה
לבני מלכה

Reputation: 16251

Use font-size: 0; to ul and font-size: 15px; to li

ul {
  display: block;
  columns: 2;
  font-size: 0;
}

li {
  border-top: 1px solid black;
  list-style: none;
  font-size: 15px;
}
<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
<li>TEST 4</li>
<li>TEST 5</li>
<li>TEST 6</li>
<li>TEST 7</li>
<li>TEST 8</li>
</ul>

Upvotes: 2

Related Questions