Design an ordered list with a border in the exact middle of two li-elemens

Tuesday, July 8, 2014










Take the 2-minute tour ×

Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.


















I have designed the following list. Now I want to keep its exact appearance but put more space inbetween the



  • elements. Unfortunately wit padding-bottom it moves the border-bottom in a way that it does NOT stay exact in the middle between two elements. I would love to put it EXACTELY in the middle. Right now I am stuck! Can anyone point me somewhere fruitful? Thanks!

    <div id="list">
    <ul>
    <li><a href="http://ift.tt/Wao6TO">No hacemos uso de cualquier de los componentes prefabricados o mezclas preparadas.</a></li>
    <li><a href="http://ift.tt/Wao6TO">Una alta calidad en la compra de los ingredientes y la preparación es nuestra principal prioridad. </a></li>
    <li><a href="http://ift.tt/Wao6TO">Todos nuestros productos se hacen con amor y se han inspirado en recetas familiares.</a></li>
    <li><a href="http://ift.tt/Wao6TO">Punto tres</a></li>
    <li><a href="http://ift.tt/Wao6TO">Queremos que nuestros clientes estén satisfechos. Si alguna vez tiene motivo de queja, le pedimos que nos devuelva su compra tan pronto como sea posible en nuestra tienda.</a></li>
    </ul>
    </div>

    #list {
    width: 100%;
    margin: 30px;
    text-align:center;
    }

    #list ul {
    list-style-type: none;
    margin: 0;
    padding-bottom: 0;
    }

    #list ul li {
    font: 200 14px/1.5 'oswaldlight';
    border-bottom: 1px solid #ccc;
    }

    #list ul li:last-child {
    border: none;
    }

    #list li a {
    text-decoration: none;
    color: #000;
    text-align:center;

    -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
    -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
    -o-transition: font-size 0.3s ease, background-color 0.3s ease;
    -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
    transition: font-size 0.3s ease, background-color 0.3s ease;
    display: block;
    width: 100%;
    }

    #list li a:hover {
    font-size: 30px;
    background: #f6f6f6;
    }

















default









http://ift.tt/1qSs3ki