Divisori link menu

colomber · 1 Feb 2015

ho un semplice menu orizzontale, uso dei divisori per dividere i link, tra i due link c'é spazio in eccesso secondo voi é possibile toglierlo? sotto il codice

<html>
<head>
<style>
#n li{display:inline;border-left: 1px solid #000000;border-right: 1px solid #000000;}
#n li:first-child {border-right: none;}
</style>
</head>

<body>

<div id="n">
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
</ul>
</div>

</body>
</html>

MAeSI · 1 Feb 2015

Ciao, forse l'argomento è già stato trattato su questo forum ma prova a dare un'occhiata qui: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Max 1 · 1 Feb 2015

Prova anche così

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                        <title></title>
<style type="text/css">
<!--
    body {
        margin:0;
        padding:0;
        font: bold 11px/1.5em Verdana;
}

h2 {
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}
    #tabsB {
      float:left;
      width:100%;
      background:#F4F4F4;
      font-size:93%;
      line-height:normal;
      }
    #tabsB ul {
        margin:0;
        padding:10px 10px 0 50px;
        list-style:none;
      }
    #tabsB li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsB a {
      float:left;
      background:url("tableftB.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsB a span {
      float:left;
      display:block;
      background:url("tabrightB.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    #tabsB a span {float:none;}
    #tabsB a:hover span {
      color:#000;
      }
    #tabsB a:hover {
      background-position:0% -42px;
      }
    #tabsB a:hover span {
      background-position:100% -42px;
      }

        #tabsB #current a {
                background-position:0% -42px;
        }
        #tabsB #current a span {
                background-position:100% -42px;
        }
-->
</style>
                </head>

                <body>
                        <div id="tabsB">
                                <ul>
                                        <!-- CSS Tabs -->
<li id="current"><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>

                                </ul>
                        </div>
                        <br /><br />
                </body>
</html>

colomber · 2 Feb 2015

ho risolto mettendo qualche px di margine negativo su first-child

Cerca

Cerca

Divisori link menu

colomber

Utente Attivo

MAeSI

Utente Attivo

Max 1

Super Moderatore

colomber

Utente Attivo

Discussioni simili