个人中心
gpt4 book ai didi

html - 表格内基于 CSS 的菜单栏 : li's are 1px off; problems with the table border?

转载 作者：行者123 更新时间：2023-11-28 04:18:44 25 4
gpt4 key购买 nike

编辑:目标浏览器为IE10以上；无需与其他浏览器兼容。

在页面的 header 中，我有 3 个元素(这也是顺序):

  • 应用程序 Logo
  • 申请标题
  • 基于 CSS 的菜单栏

Here is a JSFiddle对于那些等不及的人 ;)

header 本身是 60px 高，元素应该垂直居中并且“ float ”在左边。我无法在它们上使用 float: left 让它工作，因为我不是很擅长纯 CSS 布局，所以我实用地插入了一个 table 来实现它工作。

除了一个烦人的 1px 大问题外，它的工作原理是:li 项(即可点击的菜单栏项)有一个 1px从页面顶部偏移，因此在 header 内没有完美对齐，而是延伸到 #content。所以我的问题是:

  • 我如何解决这个偏移量及其原因是什么？我认为这可能是 table 的边界问题，但看起来并非如此.可能是因为 line-height？
  • 不是很重要，但对我来说很有趣:如果不使用table，我怎么能实现我想要的布局，因为我经常读到它是一种非常糟糕的风格？<

这是我使用的 HTML:

<body>
    <header>
        <table>
            <tr>
                <td style="vertical-align: middle">
                    <img class="logo" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.png" />
                </td>
                <td>
                    <label class="title">Title</label>
                </td>
                <td>
                    <div class="menu">
                        <ul>
                            <li>Home</li>
                            <li>Test
                                <ul>
                                    <li>One</li>
                                    <li>Two</li>
                                    <li>Three</li>
                                </ul>
                            </li>
                            <li>About</li>
                        </ul>
                    </div>
                </td>
            </tr>
        </table>
    </header>
    <div id="content"></div>
    <footer>Footer</footer>
</body>

这是 CSS:

/* ------ General layout ------ */

 body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Verdana;
    font-size: 12px;
}

header {
    width: 100%;
    height: 60px;
    background-color: #eeeeee;
    position: fixed;
    top: 0;
}

#content {
    width: 90%;
    margin: 0 auto;
    padding-top: 70px;
    /* header height + 10 */
    padding-bottom: 50px;
    /* footer height + 10 */
}

footer {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #eeeeee;
    position: fixed;
    bottom: 0;
    text-align: center;
}

.logo {
    resize: both;
    height: 30px;
    margin-left: 20px;
    margin-right: 20px;
}

.title {
    font-weight: bold;
    color: green;
    margin-right: 20px;
}

/* ------ CSS-based menu bar attempt ------ */

 table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

table td:last-child {
    width: 100%;
}

.menu ul {
    line-height: 60px;
    text-align: left;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu ul li {
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 0 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.menu ul li:hover {
    background: #555;
    color: #fff;
}

.menu ul li ul {
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 160%;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}

.menu ul li ul li {
    background: #555;
    display: block;
    color: #fff;
    text-shadow: 0 -1px 0 #000;
}

.menu ul li ul li:hover {
    background: #666;
}

.menu ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

最佳答案

如果您检查您的页面(使用 Firebug、Chrome 开发者工具或类似的东西)，您可以看到 td 里面堆放了您的 li 元素(以及你所有其他的 tds) 都有一个 1px 的填充，这是困扰你的像素的来源。恐怕我不能真正告诉你这个填充是从哪里来的，因为我在检查器中看不到它的规则，所以我假设它只是表/tds 的默认呈现。您可以添加如下规则来覆盖它:

td {
  padding: 0;
}

理想情况下，您还应该在表格上使用 CSS 类，并在 CSS 中使用它以仅针对这些特定的 td，以防您需要将不同的规则应用于页面中的另一个表格。

关于html - 表格内基于 CSS 的菜单栏 : li's are 1px off; problems with the table border?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30297331/

25 4 0
文章推荐： javascript - 将点击事件应用于除单个元素之外的所有元素
文章推荐： javascript - 在 jQuery 中单击兄弟时从当前 div 中删除事件类
文章推荐： Javascript 在 POST 之前加密密码
文章推荐： html - 如何将图标与其标题或文字描述对齐？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com