htmldog suckerfish液体

3）在始终可见的男人之间插入相等的距离你在浏览器窗口的宽度上依赖，所以如果浏览器窗口发生例如600像素： --------- ------------------ 600px ---------------------------- Percoidei Anabantoidei Anabantoidei 或者如果窗口大小不超过360像素： --------------- 360px ----------------- Percoidei Anabantoidei Anabantoidei 这可以用CSS完成吗？如果有的话，任何提示将不胜感激！ timmy， 1）显示：表格可能就是你想要的。 2）模糊的要求。什么是区域的宽度。意思？我看到 三个字，长度各不相同。我没有看到任何区域。 3）宽度：每个单词的33％左右，或者存在 单词的div。 br /> 可能在CSS？可能，如果你只限于符合标准的浏览器。换句话说，忘记IE，这可能不是一个坏主意...... 我在这里故意模糊。按照你想要的方式工作将是一项乏味且令人沮丧的工作。使用 不兼容的浏览器可以将您送到有趣的农场。 Chris Beall >三个字，长度不同。我没有看到任何区域。 是的，你是对的，区域不可见，因为它们没有上色 例子。 我的意思是htmldog示例的块（链接）区域，它们 都跨越相同的宽度CSS代码中定义的10em： http://www.htmldog.com/articles/suck...le/bones2.html 我想要摆脱的多余空间介于两者之间这个词的结尾 Percoidei到Anabantoidei这个词的开头，并且从结尾的 Anabantoidei到Gobioidei的开头。这将使水平 样式菜单更加紧凑。 我在这里故意模糊。让你按照自己想要的方式工作将是一项乏味且令人沮丧的工作。使用它 好​​的 - 听起来很复杂，所以相反，如果我减少问题和机会 去搞笑的农场，是否可以： 1）使包含始终可见链接的区域（例如Percoidei， Anabantoidei和Gobiodei）仅限于需要内容宽度？ （在 其他的话 - 任何单词右边没有空格）。 2）每个下拉菜单的宽度是否等于宽度内部最长的文字？ 我可以使用图形代替纯文本链接并固定每个下拉菜单区域的像素宽度，但它会使更新任何网站 经常变化多于繁琐的程序。 timmy写道： （剪辑）好的 - 听起来很复杂，所以相反，如果我减少了问题以及我去滑稽农场的机会，那么它是否可能： Anabantoidei和Gobiodei）的大小仅限于所需的内容宽度？ （换句话说 - 任何单词右侧都没有空格。） 2）每个下拉菜单的宽度是否等于最长文本的宽度？ 我可以使用图形而不是纯文本链接和固定的每个下拉菜单区域的像素宽度，但它会更新任何网站经常变化的更多 timmy， 使用图形禁止访问者更改文本大小 并阻止搜索引擎索引单词（可能是页面上最关键的单词用于搜索目的）。 天，我可能会认为这是一个有趣的技术挑战，但这不是其中之一。我要做的第一件事是 仔细设定我的目标： - 仅限HTML和CSS。没有JavaScript。 - 不支持IE，这已经过时了。这将允许我使用 ：悬停。 因为最后的标准可能是不可接受的（还）真实的 世界，我知道如果它是我的网站我会怎么做： - 折腾JavaScript - 折腾与#nav相关的所有CSS。 这给你留下了一个三级嵌套列表，让我们面对它， 数据是什么。以这种方式呈现给用户。 隐藏大部分信息的重点是什么，然后只有当用户用稳定的手牌徘徊在正确的位置时才显示它的碎片一只老鼠？ （我只是尝试使用Tab键来浏览它。我推断 这个''有效'，但是第二级和第三级该列表永远不会显示，因此用户无法确定焦点在哪里，使其无用。） 您可以解决的一些问题，有些你可以跳过。对于一些人来说，最好的办法就是走开，寻找另一条道路。我认为这是后者之一。 Chris Beall Anyone knows if the htmldog suckerfish menu can be done in a more fluidway: http://www.htmldog.com/articles/suckerfish/dropdowns/Or more precisely, the 2-level menu: http://www.htmldog.com/articles/suck...le/bones2.htmlIn fluid I mean:1) The width of each drop menu to equal the widest text of any itemcontained within the visible drop menu.2) The width each of the area for the always visible texts (Percoidei,Anabantoidei and Gobiodei) to match that of each of those words.3) Insert an equal distance between the always visible menu words dependingon the width of the browser window, so in case the browser window happensto be for example 600 pixels:---------------------------600px----------------------------Percoidei Anabantoidei AnabantoideiOr if the window is sized down to 360 pixels:---------------360px-----------------Percoidei Anabantoidei AnabantoideiCan this be done in CSS? If so any tips how would be greatly appreciated! 解决方案 timmy wrote: Anyone knows if the htmldog suckerfish menu can be done in a more fluid way: http://www.htmldog.com/articles/suckerfish/dropdowns/ Or more precisely, the 2-level menu: http://www.htmldog.com/articles/suck...le/bones2.html In fluid I mean: 1) The width of each drop menu to equal the widest text of any item contained within the visible drop menu. 2) The width each of the area for the always visible texts (Percoidei, Anabantoidei and Gobiodei) to match that of each of those words. 3) Insert an equal distance between the always visible menu words depending on the width of the browser window, so in case the browser window happens to be for example 600 pixels: ---------------------------600px---------------------------- Percoidei Anabantoidei Anabantoidei Or if the window is sized down to 360 pixels: ---------------360px----------------- Percoidei Anabantoidei Anabantoidei Can this be done in CSS? If so any tips how would be greatly appreciated!timmy,1) display: table might be what you want here.2) Ambiguous requirement. What does "width of the area" mean? I seethree words, of differing lengths. I don''t see any "area".3) width: 33% or thereabouts for each word, or a div within which theword exists.Possible in CSS? Probably, if you confine yourself tostandards-compliant browsers. In other words, forget IE, which probablyisn''t a bad idea...I''m being deliberately vague here. Getting this to work the way youwant will be a tedious and frustrating exercise. Making it work withnon-compliant browsers will send you to the funny farm.Chris Beall > three words, of differing lengths. I don''t see any "area".Yes you''re right, the areas are not visible, as they''re not colored on theexample.What I mean is the area of the blocks (links) of the htmldog example, theyall span the same width of 10em as defined in the CSS code: http://www.htmldog.com/articles/suck...le/bones2.htmlThe excess space which I want to get rid of is between the end of the wordPercoidei to the start of the word Anabantoidei , and from the end ofAnabantoidei to the start of Gobioidei. This would make the horizontalstyle menu more compact. I''m being deliberately vague here. Getting this to work the way you want will be a tedious and frustrating exercise. Making it work withOK - sounds complicated, so instead, if I reduce the problem and my chancesof going to the funny farm, would it be possible to:1) Make the areas containing the always visible links (eg. Percoidei,Anabantoidei and Gobiodei) size only to required width of contents? (Inother words - no space on the right of any of the words).2) Can the width of each drop menu equal the width of longest text within?I can do the above using graphics instead of plain text links and fixedpixel widths for each drop menu area, but it would make updating any sitethat is changing on a frequent basis a more than tedious procedure.timmy wrote:(snip) OK - sounds complicated, so instead, if I reduce the problem and my chances of going to the funny farm, would it be possible to: 1) Make the areas containing the always visible links (eg. Percoidei, Anabantoidei and Gobiodei) size only to required width of contents? (In other words - no space on the right of any of the words). 2) Can the width of each drop menu equal the width of longest text within? I can do the above using graphics instead of plain text links and fixed pixel widths for each drop menu area, but it would make updating any site that is changing on a frequent basis a more than tedious procedure.timmy,Using graphics prohibits your visitor from changing the size of the textand prevents search engines from indexing the words (which are probablythe most critical ones on the page for search purposes).On some days, I might consider this to be an interesting technicalchallenge, but this isn''t one of them. The first thing I would do isset my goal carefully:- HTML and CSS only. No JavaScript.- No support for IE, which is obsolete. This would allow me to use:hover.Since that last criteria probably isn''t acceptable (yet) in the realworld, I know what I would do if it were MY site:- Toss the JavaScript- Toss all of the CSS associated with #nav.That leaves you with a three-level nested list, which is, let''s face it,what the data is. Present it to the user that way. What''s the point ofhiding most of the information, then showing fragments of it only whenthe user, with a steady hand, hovers over the right spot with a mouse?(I just tried to navigate through it using only the Tab key. I inferthat this ''works'', but the 2nd and 3rd levels of the list are nevervisible, so the user can''t tell where the focus is, making it useless.)Some problems you can bull through, some you can leap over. For some,the best thing to do is just walk away and look for another path. Ithink this is one of the latter.Chris Beall 这篇关于htmldog suckerfish液体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！