问题描述:

Question

I have a simple floated list with borders on each item, but not on each side.

  • The grid I'm trying to create looks very much like this character #
  • Full borders on each item on the inside, no containing border surrounding it, no outline.

How?

The example

  • In the example there are bottom borders to the last items. They should not be there.
  • In the example there are right borders on the edge to the right. They should not be there.
  • The first and the third item are correct in the first list.
  • The first and the second items are correct in the second list.

Fiddle

jsfiddle (Updated with expected result)

HTML

<ul>

<li>One</li>

<li>Two</li>

<li>Three</li>

<li>Four</li>

<li>Five</li>

</ul>

<br><br>

<ul class="three">

<li>One</li>

<li>Two</li>

<li>Three</li>

<li>Four</li>

<li>Five</li>

</ul>

<h2>Expected result</h2>

<ul>

<li>One</li>

<li style="border-right: none;">Two</li>

<li>Three</li>

<li style="border-right: none;">Four</li>

<li style="border-bottom: none;">Five</li>

</ul>

<br><br>

<ul class="three">

<li>One</li>

<li>Two</li>

<li style="border-right: none;">Three</li>

<li style="border-bottom: none;">Four</li>

<li style="border-bottom: none;">Five</li>

</ul>

CSS

li {

border-bottom: 1px solid #ccc;

border-right: 1px solid #ccc;

width: 50%;

float: left;

-moz-box-sizing: border-box;

box-sizing: border-box;

list-style: none;

padding: 30px;

}

ul {

margin-bottom: 20px;

overflow: hidden;

}

ul.three li {

width: 33.33%;

}

网友答案:

If you only want borders on the inside and none around the container, you may add a container with overflow:hidden; and use negative margins on the <ul> element to hide the unwanted borders :

DEMO

This way, you don't have to target each element to add specific borders to it according to it's position in the container.

div {
  overflow: hidden;
  margin-bottom: 20px;
}
ul {
  margin: 0 -1px -1px 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
  width: 50%;
  padding: 30px;
  box-sizing: border-box;
  list-style: none;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.three li {
  width: 33.33%;
}
<div>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
  </ul>
</div>

<div>
  <ul class="three">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
  </ul>
</div>
相关阅读:
Top