Search code examples
csstextalignment

css - add padding to the horizontal menu without changing width of the border

I have http://jsfiddle.net/dfo44q7f/3/ 

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Untitled</title>
    <link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<ul class="nav">
  <li><a href="/">Menu1</a></li>
  <li><a href="/Menu2/">Menu2</a></li>
  <li><a href="/Menu3/">Menu3</a></li>
</ul>
</body>
</html>

How do i:

  • i'd like to keep the line underneath of the menu as wide as the text
  • but also add padding to the left and right of the li
Solution

  • I think you're looking for margin..

    .nav li{
    display:inline;
    border-bottom: 1px solid currentColor;
    text-align: center;
    padding: 0px 0px 10px 0px;
    margin-left:50px; 
}