Форум

cha0s · #1 (**permalink**) 18.07.2014, 16:00

Объясните почему так:

<style type="text/css">
#mytestul li:hover {background:yellow;}
#mytestul li {width:10%; float:left;}
</style>
		
</head>
  
<body style="margin-left:0px; margin-right:0px;">
<div style="width:100%; background-color:green; height:55px;">
<ul id="mytestul" style="list-style:none; padding-left:0px; padding-right:0px;">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>9</li>
</ul>
</div>	
</body>

Такой элементарный код, список растянутый на все разрешение экрана от самого начала и до самого конца, на Chrome, Mozilla, и даже IE11, все как надо выглядит, но на таких браузерах как Safari, rekonq и что там еще есть в этом духе, справа все время присутствует какой-то отступ примерно в 5px!!

Почему так? слева все ок, в справа какой-то отступ идет и не как не могу от него избавиться... не каких других *.css файлов не подключается это весь код что вы видите....

Pavel M. · #2 (**permalink**) 18.07.2014, 18:21

Добавьте в стили

#mytestul li:last-child {float:right;}

cha0s · #3 (**permalink**) 19.07.2014, 01:58

увы не решает это проблемы, он сдвигает li до конца, но появляется новая дырка между предпоследнем li и последним.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
#mytestul li:hover {background:yellow;}
#mytestul li {width:10%; float:left;}
#mytestul li:last-child {float:right;}
</style>		
</head>
  
<body style="margin-left:0px; margin-right:0px;">
<div style="width:100%; background-color:green; height:55px;">
<ul id="mytestul" style="list-style:none; padding-left:0px; padding-right:0px;">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>9</li>
</ul>
</div>	
</body>
  
 </html>

это все что есть в html файле, будут еще идеи? что это за хрень такая?

а без li:last-child {float:right;} эта дырка просто в самом конце li будет.... WFT

рони · #4 (**permalink**) 19.07.2014, 04:18

cha0s,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>


<style type="text/css">
*{
  margin: 0px;padding: 0px;
}

#mytestul li:hover {background:yellow;}
#mytestul li {width:10%; float: left;}
#mytestul li:last-child {margin-left: 90%; position: absolute;}

</style>


<body style="margin-left:0px; margin-right:0px;">
<div style="width:100%; background-color:green; height:55px;">
<ul id="mytestul" style="list-style:none; padding-left:0px; padding-right:0px;  ">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>9</li>
</ul>
</div>
</body>


</html>

cha0s · #5 (**permalink**) 19.07.2014, 12:43

рони, спасибо за отзыв но у меня будет border у li, чтоб кнопки как-то разделить, и с position:absolute; там явно будет ерунда) конечно я знаю можно text-align:center;, но это не решает проблемы так как при :hover по такому элементу он закроет border

рони · #6 (**permalink**) 19.07.2014, 13:38

cha0s,
так?

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}

div{
  display:table;
  width:100%;
  background:#008000;
  height:55px;
}

#mytestul{
  display:table-row;
}

#mytestul li:hover{
  background:#FF0;
}

#mytestul li{
  display:table-cell;
  width:10%;
  border-right:#000000 1px solid;
  list-style:none;
}

#mytestul li:last-child{
  border-right:none;
}
</style>
<body>
<div>
<ul id="mytestul" >
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>9</li>
</ul>
</div>
</body>
</html>

cha0s · #7 (**permalink**) 19.07.2014, 13:55

!!!!!!!!!!!!!! ёпт! ты гений! значит для этого браузера надо в виде таблицы делать, я день убил на гуглинья решения!! даже не вериться но действительно работает и на других браузерах тоже даже под линуксом на допотопном rekonq

)

Спасибо большое!

Форум

Справочник

Discord чат

Курсы javascript