文章/答案/技术大牛

发布

问不在父目录中的子项
EN

Stack Overflow用户

提问于 2021-05-02 16:46:11

回答 2查看 38关注 0票数 0

据我所知，div中包含的按钮应该留在其中。这是当我让它们显示为内联时的情况，但是它们没有大小。当我将display设置为inline-block时，它们会出现在页面的底部，但这次的大小是正确的。这是我第一次用css做一些事情，所以我对所有东西的工作原理都知之甚少。我们将非常感谢您的帮助。

html {
    height: 100%;
}

body {
    height: 100%;
}

.slider {
    width: 100%;
    height: 20%;
    overflow: hidden;
    position: fixed;
    text-align: center;
}

.image-container {
    width: 300%;
    height: 100%;
    position: relative;
    clear: both;
    transition: right 1s;
}

.slide {
    float: left;
    width: 33.333%;
}

#slide-1:target ~ .image-container {
    right: 0%;
}
#slide-1:target ~ .buttons > #button-1 {
    opacity: 0.5;
}
#slide-2:target ~ .image-container {
    right: 100%;
}
#slide-2:target ~ .buttons > #button-2 {
    opacity: 0.5;
}
#slide-3:target ~ .image-container {
    right: 200%;
}
#slide-3:target ~ .buttons > #button-3 {
    opacity: 0.5;
}

.buttons {
    position: relative;
    height: 1em;
    bottom: 1em;
}

.buttons > a {
    display: inline-block;
    height: 1em;
    width: 1em;
    margin: 0 1em;
    padding: 0;
    border-radius: 0.5em;
    background-color: lightgreen;
}

<html lang="eng">

<head>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <title>Slideshow</title>
</head>

<body>
    <section class="slider">
        <span id="slide-1"></span>
        <span id="slide-2"></span>
        <span id="slide-3"></span>
        <div class="image-container">
            <img src="{{ url_for('static', filename='images/gandalf.jpeg') }}" class="slide">
            <img src="{{ url_for('static', filename='images/mountains.jpeg') }}" class="slide">
            <img src="{{ url_for('static', filename='images/rivendale.jpeg') }}" class="slide">
        </div>
        <div class="buttons">
            <a id="button-1" href="#slide-1"></a>
            <a id="button-2" href="#slide-2"></a>
            <a id="button-3" href="#slide-3"></a>
        </div>
    </section>
    <section class="content">
        {% block content %}{% endblock %}
    </section>
</body>

</html>

image: div

image: button

html

css

回答 2

Stack Overflow用户

发布于 2021-05-02 17:09:54

内联元素的行为就像普通文本一样。它们不能有指定的宽度/高度，而是水平扩展以适合其内容，垂直扩展以匹配父元素的字体大小(除非为它们分配了字体大小)。在您的代码片段中，您有空的<a>元素，因此将它们设置为内联将导致它们缩小为零宽度。

票数 0

Stack Overflow用户

发布于 2021-05-02 18:14:50

如果有人有同样的问题，如截图所示:确保图像的高度设置为100%，否则它可能会超出图像容器，搞砸一切。显然，图像不会自动缩放以适应div。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67354463

复制

相似问题

问不在父目录中的子项
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不在父目录中的子项EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不在父目录中的子项
EN