He creado una barra de navegación alineada al centro simple para mi sitio web. Sin embargo, los bordes de los elementos en la barra de navegación no se superponen perfectamente, dando una apariencia desarticulada. Esto es lo que quiero decir:

enter image description here

Observe los bordes dobles para cada enlace. Tenga en cuenta que incluso si elimino uno de los bordes, el efecto de desplazamiento todavía revela la imperfección:

enter image description here

¿Cómo puedo solucionar esto creando bordes que se superpongan perfectamente?


Aquí está el código:

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ff9933;
    font-size:90%;
    text-align: center;
    }

    ul.navbar li {
        margin: auto;
        display: inline-block;
        border-right: 1px solid #ffb366;
        border-left: 1px solid #ffb366;
    }


    ul.navbar li a {
        display: inline-block;
        color: white;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 3px;
        padding-bottom: 3px;
        text-decoration: none;
    }

    ul.navbar li a:hover {
        background-color: #e67300;
    }
<ul class="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#"><b>New Account</b></a></li>
    <li><a href="#">Old Account</a></li>
</ul>
css
0
Hassan Baig 27 dic. 2016 a las 23:33

3 respuestas

La mejor respuesta

Si establece tanto el valor li como el elemento a display del elemento en inline-block, solucionará el problema que tiene:

/* navigation bar*/

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ff9933;
    font-size:90%;
    text-align: center;
}

ul.navbar li {
    margin: auto;
    display: inline-block;
    border-right: 1px solid #ffb366;
    border-left: 1px solid #ffb366;
}

ul.navbar li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    text-decoration: none;
}

ul.navbar li a:hover {
    background-color: #e67300;
}
<ul class="navbar">
  <li>
    <a href="#">Link 1</a>
  </li><li>
    <a href="#">Link 2</a>
  </li><li>
    <a href="#">Link 3</a>
  </li><li>
    <a href="#">Link 4</a>
  </li>
</ul>

Esto también le permitirá hover todo el elemento en el menú (y no solo parte de él).

Otra opción

(sin cambiar la estructura HTML) es cambiar el tamaño de fuente del elemento ul (y establecer el tamaño de fuente en li):

l.navbar {
    font-size: 1px;
}

ul.navbar li {
    font-size: 14px;
}

Ejemplo de trabajo:

/* navigation bar*/

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ff9933;
    font-size: 1px;
    text-align: center;
}

ul.navbar li {
    margin: auto;
    display: inline-block;
    border-right: 1px solid #ffb366;
    border-left: 1px solid #ffb366;
    font-size: 14px;
}

ul.navbar li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    text-decoration: none;
}

ul.navbar li a:hover {
    background-color: #e67300;
}
<ul class="navbar">
  <li>
    <a href="#">Link 1</a>
  </li>
  <li>
    <a href="#">Link 2</a>
  </li>
  <li>
    <a href="#">Link 3</a>
  </li>
  <li>
    <a href="#">Link 4</a>
  </li>
</ul>
1
Dekel 27 dic. 2016 a las 20:59

Agregue solo border-left a todos los li elementos. Y para el último agregue border-right también

ul.navbar li {
    margin: auto;
    display: inline;
    border-left: 1px solid #ffb366;
}

ul.navbar li:last-child, ul.navbar li:hover{
     border-right: 1px solid #ffb366;
}

Actualización: el problema estaba en el tamaño de fuente de ul

ul.navbar {
    margin: 0;
    padding: 0;
    background-color: #ff9933;
    text-align: center;
    font-size: 0;
}

ul.navbar li {
    margin: 0;
    font-size: 14px;
    padding:0;
    display: inline-block;
    border-left: 1px solid #ffb366;
    border-right: 1px solid #ffb366;
    width:auto;
}

Plnkr: https://plnkr.co/edit/8j5It4jlrZRgTMxsArAu?p=preview

1
Manuel Obregozo 27 dic. 2016 a las 21:43

Bueno, los elementos de bloque en línea tienen un 'espacio' circundante, por defecto:

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ff9933;
    font-size:90%;
    text-align: center;
    }

    ul.navbar li {
        margin: auto;
        display: inline-block;
        border-right: 1px solid #ffb366;
          box-sizing:border-box;
          margin-left:-4px;
     
    }
ul.navbar li:first-child {
   border-left: 1px solid #ffb366;
}

    ul.navbar li a {
        display: inline-block;
        color: white;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 3px;
        padding-bottom: 3px;
        text-decoration: none;
        box-sizing:border-box;
    }

    ul.navbar li a:hover {
        background-color: #e67300;
    }
<ul class="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#"><b>New Account</b></a></li>
    <li><a href="#">Old Account</a></li>
</ul>

Además, mantenga el borde derecho y coloque el borde izquierdo al primer li ...

2
sinisake 27 dic. 2016 a las 20:57