0

下面的 HTML 是我正在使用的。我希望它成一行而不是列表格式。

  1. 如果我使用float：left，当它“换行”时如何使div变大（垂直）？
  2. 如果我设置显示：内联，我怎样才能让它在列表项之间而不是在可能不存在的空格上进行换行（如下所示）？

 <div class="singleTiddlerList">
    	<li><a href="javascript:;" class="button center">Hide All</a></li>
    	<li><a href="javascript:;" class="button center">Show All</a></li>
    	<li><a href="javascript:;" class="button center">Refresh</a></li>
    	<li><a href="javascript:;" class="button">ResizerMacroPlugin</a></li>
    	<li><a href="javascript:;" class="button">ResourceMacro</a></li>
    	<li><a href="javascript:;" class="button">saveBackupPlugin</a></li>
    	<li><a href="javascript:;" class="button">singleTiddler</a></li>
    	<li><a href="javascript:;" class="button">sliderMacro</a></li>
    	<li><a href="javascript:;" class="button">toggleBackstageEdit</a></li>
    	<li><a href="javascript:;" class="button">TopbarPlugin</a></li>
 </div>

编辑：仅供参考，它只需要与 Chrome 和 Firefox 一起使用。它不是客户网站或类似的东西，只是个人文件（实际上是TiddlyWiki）。

4

3 回答 3

3

我认为你应该在s 上使用display: inline-block和。white-space: nowrap<li>

如果您需要支持低于版本 9 的 IE，也请使用此 hack：

display: inline-block;
*zoom: 1;
*display: inline;
于 2012-09-22T20:04:27.293 回答
1

鉴于使用 'display:inline;' 可能遇到的跨浏览器问题，我建议您使用 'float:left;' 反而。

这是工作部分：http: //jsfiddle.net/tHjap/4/

解决您提出的关于“div”（在本例中为“ul”）变大的问题，所有需要做的就是将宽度设置为“自动”

于 2012-09-22T18:56:54.563 回答
0
  1. overflow: hidden;在容器上使用。由于规格中的一些奇怪之处，这很有效。有关更多信息，请参阅http://www.quirksmode.org/css/clearing.html或http://colinaarts.com/articles/the-magic-of-overflow-hidden/
  2. 不确定我是否正确理解了这个问题，但也许你想要white-space: pre;在as 上。这将防止它们内部出现换行符。
于 2012-09-22T19:07:25.793 回答