Question

我在li元素中修改文本时遇到了一些问题。我遇到的一个问题是浮右的div不会浮动到右上方，而是在顶部留出一个空格。此外，文本没有正确“整形”。正如您在this jsfiddle中看到的那样，div很好地位于网格线内，但文本确实出现在线外。还有一种方法可以让破折号在不合适时分开单词（就像我在最后一个单词中所做的那样），或者使文本变小？

更新了显示错误文本溢出的jsfiddle：http://jsfiddle.net/u773M/1/

这是我的php创建文本float divs：

<?php for ($i = 1; $i < 7; $i++) {
 echo '<div class="trianglefloatleft" style="width:'.(3+($i*6)).'%;"></div>';
 echo '<div class="trianglefloatright" style="width:'.(9+($i*6)).'%;"></div>'; }
?>

Answer 1

如果你添加它，它将起作用

<div class="trianglefloatleft" style="width:9%;"></div>
<div class="trianglefloatright" style="width: 9%; margin-top: -12px;"></div>

这意味着你只根据你的条件创建宽度为9％的div

Answer 2

感谢@hakra，我部分到了那里。然而，真正的解决方案更简单，更有意义（不知道为什么我花了很长时间才意识到这一点）：把浮动右边的div放在第一位！

更新了关注人员的代码：http://jsfiddle.net/u773M/4/

使用跨度来形成li元素内的文本

2 个答案: