Элементы Span не выстраиваются в ожидаемом порядке

Question

Элементы Span не выстраиваются в ожидаемом порядке

0

У меня есть 3 <span> элемента внутри div, которые должны явно выстраиваться в соответствии с их порядком. Два последних пункта должны быть справа. Поэтому я сделал float: right но они смешиваются в порядке. "Прямой" должен быть справа.

HTML

<div class="caseTitle">
  <span class="caseNumber">Case</span>
  <span class="caseBack">Back</span>
  <span class="caseForward">Forward</span>
</div>

CSS

.caseTitle {
  background: #333;
  color: #fff;
  padding: 6px;
}
.caseNumber{}
.caseBack{
  float: right;
}
.caseForward{
  float: right;
}

Вот моя скрипка. http://jsfiddle.net/JGallardo/8wXNM/

JGallardo 31 дек. 2013, в 20:32

Источник

1

возможный дубликат stackoverflow.com/questions/9280247/…
furins 31 дек. 2013, в 18:46
1

jsfiddle.net/TM382
Christina 31 дек. 2013, в 18:46
0

@furins это совсем не дубликат.
JGallardo 31 дек. 2013, в 18:48
0

если вы примените тот же подход, который предложен в ответе, который я упомянул, вы получите ожидаемый результат. Просто добавьте caseNumber {float: left;} . И это также объясняет, как работает float. Если вы не против добавить дополнительный div, вы можете следовать ответу Travis.
furins 31 дек. 2013, в 18:59

Показать ещё 2 комментария

Теги:

html

css

2 ответа

0

Быстрый и грязный способ исправить это - переместить передний div над Back div. В принципе, CSS плавает первый div, который он видит полностью вправо, а затем следующий div, насколько это возможно. Итак, если вы переместите передний div вперед, он будет всплывать перед Back div, который затем будет перемещаться, насколько это возможно.

<div class="caseTitle">
    <span class="caseNumber">Case</span>
    <span class="caseForward">Forward</span>
    <span class="caseBack">Back</span>
</div>

Вместо:

<div class="caseTitle">
    <span class="caseNumber">Case</span>
    <span class="caseBack">Back</span>
    <span class="caseForward">Forward</span>
</div>

скрипка

zsaat14 31 дек. 2013, в 16:41

1

не в этом случае, но этот подход не всегда предпочтителен с точки зрения SEO
furins 31 дек. 2013, в 18:56

Ещё вопросы

возможный дубликат stackoverflow.com/questions/9280247/…
если вы примените тот же подход, который предложен в ответе, который я упомянул, вы получите ожидаемый результат. Просто добавьте caseNumber {float: left;} . И это также объясняет, как работает float. Если вы не против добавить дополнительный div, вы можете следовать ответу Travis.
не в этом случае, но этот подход не всегда предпочтителен с точки зрения SEO

Travis · Accepted Answer · 2013-12-31T16-21-00.000Z

Вы можете обернуть правильные плавающие элементы в div и right, поплавте div, а не каждое слово:

HTML

<div class="caseTitle">
    <span class="caseNumber">Case</span>
    <div class="wrap">
        <span class="caseBack">Back</span>
        <span class="caseForward">Forward</span>
    </div>
</div>

CSS

.caseTitle {
  background: #333;
  color: #fff;
  padding: 6px;
}

.wrap{
  float: right;
}

скрипка: http://jsfiddle.net/8wXNM/1/