This page http://goo.gl/262QmJ has a css to make a list-group floating horizontally and sticking together like it does for list-group to render vertically by default. In order to float list-group-items float horizontally one may add a “list-inline” style to UL tag but it wont take care of the left-right borders and radii. So adding the “list-group-horizontal” code would take care of it.
Also one can keep or remove the “list-inline” class, it won’t matter to have it or not, when you have the “list-group-horizontal” added. One gets rid of the UL left-padding if one has “list-inline” in the style however.
[css]
/* List-group-horizontal*/
.list-group-horizontal .list-group-item {
display: inline-block;
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left:-4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius:0;
border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius:4px;
border-bottom-left-radius:0;
}
[/css]
Just as another note following the updated code to reduce the thickness of the border between list items.
[css]
/* List-group-horizontal*/
.list-group-horizontal .list-group-item {
display: inline-block;
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left:-4px;
margin-right: 0;
border-right:0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius:0;
border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius:4px;
border-bottom-left-radius:0;
border-right:1px solid #ddd;
}
[/css]
