Edit in JSFiddle

<div id="wrap" class="clearfix">
<ul>
    <li>content1</li>
    <li>content2</li>
    <li class="last">content3</li>
</ul>
</div>

div#wrap{
    width:450px;
    padding:20px;
    margin:20px auto;
    border:1px #ccc solid;
}

ul{
    margin:0;
    padding:0;
    text-align:right;
}

li{
    display:inline-block;
    border-left:1px solid #ccc;
    padding:0 10px;
}

li.last{
    border-right:1px solid #ccc;
}

.clearfix {zoom:1;}
.clearfix:after{
    content: ""; 
    display: block; 
    clear: both;}