CSS Исправлено положение поплавка правой

Question

У меня есть этот код:

<style> 
     .floatright 
     { 
      float: right; 
      margin-right:800px; 
     } 

     .menu { 
      padding: 0; 
      float: right; 
      width: auto; 
      position:relative; 
     } 
     .menu ul { 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
     } 
     .menu li { 
      display:inline; 
      padding:0; 
      margin: 0px; 
     } 
     .menu a:link, 
     .menu a:hover { 
      text-decoration:none; 
      padding:0 5px 5px 0; 
      margin-right: 8px; 
     } 
</style> 

<div class="floatright"> 
<ul class="menu"> 
<li><a href="/apidocs">api</a></li> 
<li><a href="/tools">tools</a></li> 
<li><a href="/blog">blog</a></li> 
</ul> 
</div> 

он предназначается, чтобы плавать в правой части страницы (не в правом углу - только слева) и имеют пробелы между каждой ссылки.

Пробелы работают нормально, но когда на экране изменяется ти не оставаться там, где он должен

какие-либо идеи?

Answer 1

Charlie, потому что у вас есть край 800px справа от div, он всегда будет иметь этот запас независимо от разрешения экрана.

Если вы хотите, чтобы маржа стала меньше на основе разрешения экрана, возможно, посмотрите на использование процентов или медиа-запросов.

Answer 2

Вам необходимо центрировать родительский div ... а затем меню будет плавать вправо.

.floatright { 
     width:1000px; 
     height:50px; 
     margin:0 auto; 
    } 

Где ширина должна быть шириной «оранжевого ящика». Меню уже плавает в своем родительском div.

вот jsfiddle пример: http://jsfiddle.net/hvLkh/

Дополнительный совет: 1) не ставят дивы за пределами тегов тела, 2) добавить атрибут Hight к DIV, чтобы подтолкнуть коробку вниз, и 3) добавить форматирования шрифт прямо в ваш CSS и избежать тегов шрифтов ... как это:

.floatright { 
     width:1000px; 
     height:50px; 
     margin:0 auto; 
     font-family:"Trebuchet MS",Arial,Verdana,Tahoma; 

    } 

а вот обновленная скрипка: http://jsfiddle.net/n6mnP/1/