Как настроить навигацию по полной ширине?

Я должен разместить навигацию по всей ширине браузера. Как настроить навигацию по полной ширине?

Проблема заключается в том, чтобы щелкнуть по первому элементу, вплоть до полной ширины браузера этого элемента.

Это также последний пункт

Чтобы сделать это, я просто работал с нав первого ребенка и нав последнего ребенка. Вы можете увидеть мою работу в here.

Это хорошо работает в firefox. Но, при хромировании, если я увеличиваю/уменьшаю изображение, пользовательские предметы будут разбиты.

HTML код:

<body> 
    <div id="header" class="outer"> 
     <div class="inner"> 
      <h1 class="logo"><a href="index.html"><img src="images/logo-1.png" width="314" height="158" alt="logo" /></a></h1> 
      <div class="nav"> 
       <ul> 
        <li><a href="#">home</a></li> 
        <li><a href="#">Nieuws</a></li> 
        <li><a href="#">Praktijk</a></li> 
        <li><a href="#">Behandelingen</a> 
         <ul> 
          <li><a href="#">ouderen</a></li> 
          <li><a href="#">Sport</a></li> 
          <li><a href="#">Algemeen</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="inner"> 
     <div id="content"> 
      <p>Lorem...</p> 

     </div> 
    </div> 
</body>

код CSS:

body { 
    background: #fff; 
    color: #000; 
    font-family: 'HelveticaNeueLTStd55Roman'; 
    font-size: 14px; 
    line-height: 1em; 
    overflow-x: hidden; 
} 

.outer { 
    width: 100%; 
    float: left;  
} 
.inner { 
    width: 941px; 
    margin: 0 auto; 
} 

#header { 
    width: 100%; 
    float: left; 
    padding: 22px 0 5px 0; 
    background: url(../images/header-bg.png) repeat-x; 
} 
h1.logo a { 
    display: block; 
    float: left; 
} 

.nav { 
    width: auto; 
    float: left; 
    margin: 24px 0 0 0; 
} 
.nav ul ul { 
    display: none; 
} 
.nav ul li:hover > ul { 
    display: block; 
} 

.nav ul { 
    list-style: none; 
} 

.nav ul li { 
    float: left; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 
.nav ul li a { 
    min-width: 155px; 
    text-align: center; 
    margin: 0 0 8px -21px; 
    padding: 0 22px 0 32px; 
    display: block; 
    font-size: 14px; 
    color: #cc3840; 
    line-height: 28px; 
    font-family: 'HelveticaNeueLTStd75Bold'; 
    text-transform: uppercase; 
    border-radius: 14px; 
    background: #fff; 
} 
.nav ul li.active a, .nav ul li a:hover { 
    color: #cf383c; 
    background: none; 
} 
.nav ul li:first-child a { 
    margin-left: -900%; 
    padding-left: 900%; 
} 
.nav ul li:last-child a { 
    margin-right: -900%; 
    padding-right: 900%;  
} 
.nav ul li:hover a { 
    color: #cf383c; 
    background: none; 
} 
    .nav ul ul { 
     position: absolute; 
     left: 10px; 
     right: 0; 
     display: none; 
     z-index: 5; 
    } 
    .nav ul ul li { 
     position: relative; 
     margin: 0; 
     border: none; 
    } 
    .nav ul ul li a, .nav ul li:hover ul li a { 
     width: 140px; 
     display: block; 
     background: #d0353e; 
     color: #ffe597; 
     font-size: 18px; 
     margin: 6px 0 0 0; 
     padding: 0; 
     line-height: 26px; 
     text-align: center; 
     border-radius: 12px; 
    } 

    .nav ul ul li a:hover, .nav ul li:hover li a:hover { 
     color: #fff; 
    } 

#content { 
    width: 100%; 
    float: left; 
    border-top: 3px solid #fce696; 
    margin: 20px 0 0 0; 
} 
#content p { 
    font-size: 14px; 
    padding: 10px 0;  
}

Можете ли вы сказать мне, как я могу это исправить, что для хрома и сафари.

Заранее спасибо

источник

2013-07-16 user1896653

Я не совсем уверен, что ты «попытаться добиться от описания, но попробуйте изменить пиксели на проценты. Если вы хотите, чтобы элементы располагались относительно друг друга, вам нужно использовать относительную единицу измерения или макет будет разорваться при изменении размера. – mcbex

Ли, кажется, конфликтует с Chrome. Я предлагаю тестировать на www.jsfiddle.net и посмотреть, работает ли он так же в Chrome. – designtocode

вам необходимо установить ширину .nav> уль> Ли, чтобы устранить эту проблему

.nav ul li:first-child, .nav ul li:last-child { 
    width: 165px; 
}

его работает отлично http://demo.sumedhasoftech.com/manoj/test/test.html

источник

2013-07-16 13:00:08

Я думаю, это не сотворение. Я установил ширину в nav ul li. Это показало отличный результат при использовании firefox и chrome. – user1896653

Я установил ширину на nav ul li. Вот почему, это не сработало. Вы установили ширину в nav ul li: first-child и nav ul li: последний ребенок. Он работает нормально. большое спасибо – user1896653

Как настроить навигацию по полной ширине?

ответ

Смежные вопросы