没有javascript的Html水平锚点答案

【问题标题】：Html anchor horizontally without javascript没有javascript的Html水平锚点
【发布时间】：2013-08-21 04:33:04
【问题描述】：

http://www.indofolio.com/，我正在尝试创建一个功能与此类似的网站，但我不明白他是如何在没有 javascript 的情况下使用锚标记进行水平滚动的。关闭 javascript，他的网站仍然可以正常运行。我真的很喜欢他所做的渐进式增强。

水平锚定的测试代码，取出inline-block并向左浮动，效果很好。

    <!DOCTYPE HTML>
    <html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ab {
    width: 20%;
    height: 20%;
    float: left;
    display: inline-block;
    border: 1px solid red;

}

</style>
 </head>
 <body>
 <a href="#box1">aaaaaaa</a>
 <a href="#box2">bbbbbbb</a>
<div id="container" style="width:100%">
    <ul style="width:500%;height:2000px;background-color:red">
        <li class="ab"><a name="box1"></a>
            <div>test</div>
        </li>
        <li class="ab"><a name="box2"></a>
            <div>test2</div>
        </li>
        <li class="ab">
            <a name="box3"></a>
            <div>test3</div>
        </li>
        <li class="ab">
            <div></div>
        </li>
        <li class="ab">
            <div></div>
        </li>
    </ul>
</div>
 </body>
 </html>

【问题讨论】：

标签： html css

【解决方案1】：

就像 Quentin 所说，但如果您是网页设计新手，他的解释可能会有些欠缺。关闭 javascript 后，请注意 url 的变化。主页是www.indofolio.com/#box1，下一个是#box2，等等。这些是id 他正在使用的内容框。 a 标记的正常行为是“跳转”到这些点（如果它们存在于页面上并且锚点设置为这样做）。他的主页锚点是<a class="link home selected" href="#box1">Home</a>，其中href 是导致跳转到该位置的原因。

编辑：这是您的示例的一些重新编写的代码。

HTML

<div id="nav">
 <a href="#box1">B1</a>
 <a href="#box2">B2</a>
 <a href="#box3">B3</a>
 <a href="#box4">B4</a>
 <a href="#box5">B5</a>
</div>
<div id="container">
    <ul>
        <li class="ab" id="box1">
            <div>test1</div>
        </li>
        <li class="ab" id="box2">
            <div>test2</div>
        </li>
        <li class="ab" id="box3">
            <div>test3</div>
        </li>
        <li class="ab" id="box4">
            <div>test4</div>
        </li>
        <li class="ab" id="box5">
            <div>test5</div>
        </li>
    </ul>
</div>

CSS

body {
    padding: 0;
    margin: 0;
}
.ab {
    width: 20%;
    float: left;
    padding: 0;
    margin: 0;
}

.ab div {
    height: 500px;   
    border: 1px solid red;
}

#container {
    width: 500%; /* five page widths for five horizontal pages */
    padding: 0;
    margin: 1.5em 0 0;
}

#container ul {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav {
    position: fixed;
    left: 0;
    top: 0;
}

#nav a {
    margin-right: 10px;
    display: inline-block;
}

【讨论】：

是的，我理解它是如何跳跃的，但是它不能横向工作，我只是在上面粘贴了一个代码来测试它。当您删除 inline-block 并向左浮动时，它可以完美地工作，但不是相反。可悲的是，它适用于 indofolio.... 它仍然是一个谜
在关闭 javascript 的情况下，它不会在 indofolio 上水平移动。它只是“跳跃”到位。水平仅受 javascript 影响。
关闭javascript，关闭div id="wrapper"上的溢出隐藏，当你缩小图像时水平对齐以最小化内容，当你点击菜单时它会跳转到它。我知道。但即使在我上面的简单测试中它也不能正常工作。它不会水平跳跃...比x更精确请，因为我很愚蠢，当我必须再次精确时，我觉得更愚蠢。
好的，我想我现在明白你的问题了。我编辑了您的示例代码。主要的关键是让你的容器足够宽以容纳你漂浮的物体。

【解决方案2】：

如果 JS 不可用，它会使用常规锚点垂直滚动。

水平定位是用JS应用的。

【讨论】：