问题描述
|
我最近一直在问很多问题，但希望这是一段时间后的最后一个问题。
我在以下网址举了一个例子：http：//myhideout.eu/menu/
基本上，所有内容都与我新站点的菜单有关，结构设计与您通常看到的内容，语义以及所有类似内容有所不同
基本上，它由许多选项卡组成，虽然可以，但不是实际的链接。
下面是一个预定义的区域，将用于两个目的之一。
假设用户未浏览菜单，则该区域将用于与导航无关的内容。例如，显示横幅图像。定义为主要内容。
使用菜单时，不会显示此主要内容。该区域将用于子菜单。
我应该认为这很简单，并且假定较新的浏览器没有严重的浏览器兼容性问题，目前，这些浏览器不包括ie8和更早的版本。我可能会选择在任何时候都支持ie8，而实际上要支持b8ut，这将更多地支持Windows XP。
现在一切都很好，并且可以使用，但是我想回答一些问题，我想解决一些问题。
首先，如果我可以避免使用div，我想这样做。如果还有其他更合适的元素，请告诉我。
其次，它很快就会与所有：hover混淆。 CSS本身就是一团糟，所有建议都将受到欢迎。
第三，关于显示为表格单元的li元素的定义宽度，我发现它们的行为很奇怪。如果我将宽度设置为100％，则第一个单元格将尽可能宽，同时仍显示其他单元格，但是如果我将绝对像素值设置得太高，则所有单元将完美对齐。我认为这实际上是相当不错的，这就是为什么现在将宽度设置为等于导航区域的宽度的原因，但这是一个好的方法，我是否可以期望它在将来的其他浏览器中也都可以使用？还是只计算适当的宽度更好？
最后，未使用导航时显示的主div实际上与导航无关，但是我还没有弄清楚如何在不将该元素放置到元素中的情况下进行操作。评论对此也将不胜感激。
可能有一些我没有注意到的问题或我忘记提出的问题，因此，再次欢迎您提出任何意见。
我确实希望在这里获得一些高质量的反馈，我希望我会;）
就是这样。
在此先感谢您和最诚挚的问候。
编辑：
采纳您的一些建议和思考，我对结构进行了一些更改：http://jsfiddle.net/hJuym/39/
我仍然没有找到更好的显示方式：table-cell
无论我最后得到的是奇怪的边距/填充还是不整齐的边框。
编辑2：
我现在已经尽了我所能想象的一切，但是仍然无法解决一个微小的问题。
有人告诉我table-cell属性是不可行的。尽管这一切都很好，但实际上，使用table-cell display属性，它确实也可以按我现在的要求正常工作。
由于table-cell不好，显然，我试图使其与inline一起使用，这导致1.5px的顶部填充或边距出现奇数，这是我无法摆脱的，但更重要的是，我m无法在li元素上设置宽度。此外，如果您希望边框看起来很完美，则边框也很难管理。显然，这里的表格单元只是将两个单元之间的边界作为一个单元。
然后当然，我尝试了内联代码块，这种方法最成功，尽管我被迫删除html中的某些空格和换行符，这很烦人，但仍然无法设置固定值宽度，虽然显然我应该可以，但边界仍然一团糟。
当然，我已经尝试过将浮动对象弄乱了，但这让我头疼。所以我要10个标签。很好，只需将总宽度除以10。是的，除非您无法设置宽度或要使用边框，否则它会起作用... jabba jabba jabba nit pick。
我没有生气或什么，但我感到困惑，疲倦和放弃。
请告诉我为什么我不能仅使用实际有效的方法，主要是table-cell属性，并假设有充分的理由，请向我详细说明替代方法，因为我不知道。看不到
最后编辑中最新工作草案的示例。
最好的祝福。
解决方法
Div，如上所述。表示“部门”。它非常适合许多情况，除非colinross在回答中提到过，否则无需替换。如果您只需要在方便的占位符中组合一些标记，请不要担心使用
div
<footer>
<nav>
<article>
<nav>
<body>
<header>Hi there!</header>
<nav>This would be site-level navigation</nav>
<article>
<header>Welcome to *this page*</header>
<nav>This would be page-level navigation</nav>
<p> Here is the actual page content </p>
</article>
body header
<article>
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...