Question

我只有一个简单的问题。我使用snap.js创建一个可滑动的菜单，但是如何添加填充？

以下是来源：http://runnable.com/UoqMXucPORNzAAIH/how-to-create-a-mobile-shelf-using-snap-js-for-javascript

GitHub上的源项目：https://github.com/jakiestfu/Snap.js/

以下是内容的代码：

<div id="content" class="snap-content">
    <div id="toolbar">
        <a href="#" id="open-left"></a>
        <h1>Default</h1>
    </div>
    <!-- Here goes the content I guess, but there is no padding -->
</div>

我需要在 #content 中包含所有内容，以便用手指滑动。但是我不能让内容有填充因此看起来很糟糕，在我看来。如果我在 #content 中添加填充，菜单也会得到它。然后我尝试添加一个名为 #main 的新<div>并将其放在 #toolbar 下，但由于某种原因，填充就像保证金一样。 #main 的宽度为100％，填充量为10px。 #toolbar显示为100％但显示100％+ 10px（左）+ 10px（右）所以它添加了滚动并且看起来很糟糕。

其他人如何解决这个问题？

正如你在JSFiddle中看到的那样，没有填充：http://jsfiddle.net/TorchMan/MexXY/

提前致谢。

Answer 1

您可以将所有内容移动到新元素，例如：

<div id="content" class="snap-content">
    <div id="toolbar">
        <a href="#" id="open-left"></a>
        <h1>Default</h1>
    </div>

    <div id="content-wrapper">
        <!-- Here goes the content I guess, but there is no padding -->
    </div>
</div>

并添加样式

#content-wrapper{
    padding:10px;
}

http://jsfiddle.net/MexXY/21/

使用Snap.js填充内容

1 个答案: