CSS float учитывает ширину контейнера - PullRequest
Новая
       17

CSS float учитывает ширину контейнера

0 голосов
/ 17 февраля 2012

У меня есть div с некоторыми span тегами внутри, которые являются контейнерами для input button с.Теперь я хочу, чтобы моя последняя кнопка всегда была float вправо.Иногда контейнер div s width переполнен (ширина контейнера больше похожа на минимальную ширину).В FF он работает почти так же хорошо с float:right, но в IE8 он отображает его справа от всей страницы, а не справа от моего контейнера.

Как я могу всплыть этой последней кнопкой (которая являетсяКнопка «Назад» справа от моего div контейнера) так: 1. Она всегда будет оставаться справа (независимо от того, будет ли ширина div overflow n или нет) 2. Она будет работать как в FF, так и в IE8,3. Обратите внимание, что в FF 5-я кнопка отображается ближе к 4-й, чем 4-й к 3-й.Есть ли другой способ сделать это, у которого нет этой проблемы, или я должен просто использовать свойство left, чтобы исправить это?

Вот пример fiddle .(проверьте это в IE8)

Резюме: Я хочу, чтобы float:right рассмотрел, растянута ли ширина контейнера div s или нет.(Если растянута точка после последней span)

Ответы [ 3 ]

1 голос
/ 21 февраля 2012

Я нашел решение. Я не использую float: right, но position:absolute и right:0, которые имеют тот же эффект, если позиция родительского контейнера установлена ​​на relative.

0 голосов
/ 17 февраля 2012

убедитесь, что вы и ваша иерархия определяете количество места, которое класс занимает в таблице стилей CSS следующим образом: 

.hello_list<------use an underscore for all spaces in class names some browsers dont like spaces also do this with your file names for all links.
{
width:"define you width in pixels here"
height:"define your height here"
padding-right:;
padding-left:;
padding-top:;
padding-bottom:;
margin-left:;
margin-right:;

определите все свои стороны с помощью этих тегов, остерегайтесь того, что маржинальный тег будет перемещать все ваши div вместо не только вашего .hello_list }

Я надеюсь, что помог GL! =)

0 голосов
/ 17 февраля 2012

используйте тег ul и создайте список, затем используйте css, чтобы определить, как он плавает, как это 

<html>
<div class="hello_list">
<ul>

<li><a"put a link attribute here or an anchor">hello 1</a></li>
<li><a"put a link attribute here or an anchor">hello 1</a></li>
<li><a"put a link attribute here or an anchor">hello 1</a></li>

</ul>
</div>
</html>

тогда в вашей таблице стилей CSS сделайте это 

html{  }
body{  }

ul{  }
ul li{ float:left;}
ul li a{ color:"put a color here"; }
ul li a:visited{ color:"put a color here";}
ul li a:hover{ color:"put a color here"; }
ul li a:active{color:"put a color here"; }

и проверьте свою иерархию, а в конечном итоге это поможет сделать ее максимально простой.

...