在CSS的Ruby on Rails视图中实现这样的最佳方法是什么:

这就是我现在所拥有的:

清单项目1-不太长
列出项目2-非常长,我不希望“列”这么大;我要把它包起来
清单项目3-你好

这就是我要的:


列表项来自解决方案类;赞成/反对是来自Solution_votes类的投票。

理想情况下,我将使用具有3列的表,但是,我也使用Axaj和JQuery进行更新,并希望使用无序列表(以使用$('#items_list')。prepend(new_item);轻松进行更新)。

最佳答案

HTML:

<ul class="entries">
  <li>
    <span class="title">List Item 1 - is not too long</span>
    <a class="thumb down">0 Votes Down</a>
    <a class="thumb up">0 Votes Up</a><!-- float:right will place this to the left -->
  </li>
  ...
</ul>


CSS:

ul.entries { list-style: none; }
ul.entries li {
  margin: 10px 0;
  border: 2px solid black;
  border-radius: 6px;
  width: 600px;
}
ul.entries .title {
  float: left;
  width: 380px;
}
ul.entries .thumb {
  float: right;
  margin-left: 20px;
  width: 90px;
  /* todo: color, background + padding-left declarations for thumb icons */
}

关于css - CSS/Ruby on Rails-将列表分成三个独立的等宽列,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11543015/

10-09 06:31
查看更多