Question

我需要一些元素按照它们在HTML中出现的顺序水平排列。我需要它们移动到容器的右侧。

如果我将项目浮动到右边，那么订单会改变。

如果我显示为内联块并使容器的文本向右对齐，则它们之间会有空格。

我可以更改HTML但是我无法删除所有空格（这可能会解决内联块的问题）。这可以解决吗？

<div class="cont">
  <div class='itemA'>1</div>
  <div class='itemA'>2</div>
  <div class='itemA'>3</div>
  <div class='itemA'>4</div>
</div>

<div class="cont contB">
  <div class='itemB'>1</div>
  <div class='itemB'>2</div>
  <div class='itemB'>3</div>
  <div class='itemB'>4</div>
</div>

.itemA,
.itemB {
  width: 50px;
  height: 50px;
}

.itemA {
  background: green;
  float: right;
}

.contB {
  text-align: right;  
}

.itemB {
  background: red;
  display: inline-block;
}

Answer 1

我不确定我是否正确理解了您的问题，但是您能否提供此CSS并尝试查看它是否是您尝试做的事情。

.cont{
 display:inline;
 float:right
}

.itemA,
.itemB {
 width: 50px;
 height: 50px;
 display: inline-block;
 margin-right:-4px;
}

.itemA:last-child, .itemB:last-child{
  margin-right:0;
 }

.itemA {
 background: green;
}

.contB {
 text-align: right;  
}

.itemB {
 background: red;
}

margin-right:4px围绕display:inline-block;进行攻击，所以这可能并不理想。

Answer 2

.itemA,
.itemB {
  width: 50px;
  height: 50px;
  display:inline-block;
}
.itemA { background: green; }
.cont { display:inline-block; word-spacing: -100%; }
.contB { float:right; }
.itemB { background: red; }

CodeOpen

Answer 3

将需要的元素以正确的顺序浮动到左侧，并将其容器浮动到右侧。

<强> HTML

<div class="cont">
     <div class='itemA'>1</div>
     <div class='itemA'>2</div>
     <div class='itemA'>3</div>
     <div class='itemA'>4</div>
</div>
<div class="cont contB">
     <div class='itemB'>1</div>
     <div class='itemB'>2</div>
     <div class='itemB'>3</div>
     <div class='itemB'>4</div>
</div>

<强> CSS

.itemA,
.itemB {
  width: 50px;
  height: 50px;
}
.itemA {
  background: green;
}
.itemB {
  background: red;
}
.cont {
    float: right;
}
.cont div {
    float: left;
}

和jsFiddle：http://jsfiddle.net/enaeLr60/

正如您所注意到的，使用display: inline-block的缺点是每个内联块之间的任何空间都将呈现为单个空格。我喜欢浮动项目以解决此问题，而不是以下选项，因为它们是不首选。

<div>1</div><div>2</div> - 元素之间没有间隔
<div>1</div><div>2</div> - 评论元素
使用负余量

<强>更新

我原来的回答忘了在.cont DIV周围加一个包装器。因此，在.itemA DIV之后出现.itemB的DIV。请参阅更新的代码以更正此问题。

<强> HTML

<div class="list-container">
     <div class="cont">
         <div class='itemA'>1</div>
          <div class='itemA'>2</div>
          <div class='itemA'>3</div>
          <div class='itemA'>4</div>
     </div>
     <div class="cont contB">
          <div class='itemB'>1</div>
          <div class='itemB'>2</div>
          <div class='itemB'>3</div>
          <div class='itemB'>4</div>
     </div>
</div>

<强> CSS

.itemA,
.itemB {
  width: 50px;
  height: 50px;
}
.itemA {
  background: green;
}
.itemB {
  background: red;
}
.list-container {
    float: right;
}
.cont,
.cont div {
    float: left;
}

更新了jsFiddle：http://jsfiddle.net/enaeLr60/1

Answer 4

我的回答是在它周围添加一个包装：http://codepen.io/anon/pen/KwvwyL

<div class="wrapper">
  <div class="cont contA">
      <div class='itemA'>1</div>
      <div class='itemA'>2</div>
      <div class='itemA'>3</div>
      <div class='itemA'>4</div>
  </div>

  <div class="cont contB">
      <div class='itemB'>1</div>
      <div class='itemB'>2</div>
      <div class='itemB'>3</div>
      <div class='itemB'>4</div>
   </div>
</div>

然后在CSS中：

.wrapper {
  float: right;
}
.contA {
  float: left;
  background: green;
}

.contB {
  float: left;
  background: red;
}

.itemA, .itemB {
  float: left;
}

将元素移到右边但是在HTML中保持顺序？

4 个答案: