Html 水平列表_Html_Css - Fatal编程技术网

Html 水平列表

html css

Html 水平列表,html,css,Html,Css,好的，我想澄清一下：我有一套6句3到6个单词的句子，例如： Some text like this - Some text like this - Some text like this - Some text like this - Some text like this 这是一个100%宽度居中的容器我正在工作的站点使用液体宽度作为内容，因此，在较小的分辨率下，我希望文本能够包装。当我说“包裹”时，在较小的分辨率下，我希望它看起来像这样： some some some some

好的，我想澄清一下：

我有一套6句3到6个单词的句子，例如：

Some text like this  - Some text like this  - Some text like this  - Some text like this  - Some text like this

这是一个100%宽度居中的容器

我正在工作的站点使用液体宽度作为内容，因此，在较小的分辨率下，我希望文本能够包装。当我说“包裹”时，在较小的分辨率下，我希望它看起来像这样：

some some some some some some 
text text text text text text 
like like like like like like 
this this this this this this

Some
text
like
this

Some
text
like
this

Some
text
like
this

因此，我希望文本像一段文本那样以%width div的形式进行包装

我不希望文本显示如下：

some some some some some some text text text text text text like like like like like like this this this this this this

Some text like this Some text like this Some text like this
希望这更有意义
谢谢
======编辑===============
在过去的几个小时里，我一直在努力实现这一目标，我即将放弃
这看起来相当简单，但我无法达到预期的效果，我开始怀疑这是否真的可行
基本上，我有liquid site layout，我希望有一个居中的水平文本列表，用于不同的分辨率：

正如您从所附的图像中看到的，当浏览器的分辨率较大时，我希望文本居中但分辨率较低时正确换行（每行换行，而不是每一块文本）
我试过各种各样的东西<代码>显示：内联，
显示：块
，浮动等，但我就是不能得到想要的结果
希望这是有意义的。
HTML:

<ul> <li>text</li> <li>text</li> <li>text</li> </ul>

可能是这样的：

<html> <head> <style> .margin{width:2%; float:left;} .column {width:16%; float:left; text-align:center;} </style> </head> <body> <div class="margin"> </div> <div class="column">Some text like this</div> <div class="column">Some text like this</div> <div class="column">Some text like this</div> <div class="column">Some text like this</div> <div class="column">Some text like this</div> <div class="column">Some text like this</div> <div class="margin"> </div> </body> </html>

.margin{宽度：2%；浮动：左；} .列{宽度：16%；浮点：左；文本对齐：中心；} 一些像这样的文本一些像这样的文本一些像这样的文本一些像这样的文本一些像这样的文本一些像这样的文本
你好，谢谢，但我想你误解了我的意思。在较低的分辨率下，我希望文本都保持在同一行，但如果太长，句子要换行。这有意义吗？你的内容的HTML结构是什么？您是否在使用媒体查询？谢谢您的澄清。您的列表在元素数量上是否必须灵活？如果是这样的话，那么我相信它不能完全用css来完成。相反，您需要在加载后运行一些javascript（jQuery）并设置li元素的宽度。谢谢，不，只需要6个句子。非常感谢！正是我想要的。我知道这很简单，就是没法让我的朋友知道。再次感谢。有一件事，是否有可能在每块文本之间有一个均匀的空间？我是否需要调整每列的宽度？也许可以尝试设置填充：0 5px；在column类上。