时间戳

首页 > 解决方案 > 如何将内联块列表项中的第一项水平居中

javascript - 如何将内联块列表项中的第一项水平居中

问题描述

我有一个列表项设置为溢出-x 滚动，以便用户可以水平滚动以查看内容。创建所有这些我没有问题，但我需要执行以下操作：

  1. 使列表中的第一项始终从水平中心开始，即它将像文本块一样居中。我已经尝试了所有使用 css 的方法，使用 flex-box 等，但它会导致整个滚动内容居中，而不仅仅是第一项。甚至尝试了引导偏移，但没有运气，因为在不同的屏幕尺寸上查看时它不会居中。

目前它的样子 当前的

我想要达到的目标。 我想要达到的目标

  1. 另一个问题是因为我的水平滚动目前就像图像 1。有什么方法可以让滚动条显示在中心而不是占据整个可滚动宽度，但用户可以滚动如下图所示的内容？

在此处输入图像描述

有什么好的建议吗？似乎我不能只使用 CSS 并且需要 JS，但我的 JS 是......可怕。如果需要，我也很乐意为工作解决方案付费。现在有点绝望。

提前致谢。

我在这里创建了codepen：https ://codepen.io/anon/pen/EqwZLJ

.scroll-horizontal ul {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}

.scroll-horizontal ul li {
    display: inline-block;
    max-width: 735px;
    margin-right: 15px;
    overflow: hidden;
}

.scroll-horizontal {
    padding-bottom: 50px;
  margin-bottom: 150px;
}

.overflow-x {
    position: relative;
    overflow-x: scroll;
}

.overflow-x::-webkit-scrollbar {
    -webkit-appearance: none;
}

.overflow-x::-webkit-scrollbar:vertical {
    width: 11px;
}

.overflow-x::-webkit-scrollbar:horizontal {
    height: 11px;
}

.overflow-x::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}


 <div class="text-center" style="width: 750px; margin: 50px auto;"><p>I need the first image in the list to be position center with the text content. I need the first image in the list to be position center with the text content. I need the first image in the list to be position center with the text content. I need the first image in the list to be position center with the text content. I need the first image in the list to be position center with the text content. I need the first image in the list to be position center with the text content. </p></div>


<div class="overflow-x space-default scroll-horizontal">
        <div class="row flex-row flex-nowrap">
            <div class="col-12">
                <ul class="">
                    <li><img src="https://ultraimg.com/images/2016/08/11/1V6u.jpg" class="img-fluid" alt=""></li>
                    <li><img src="https://ultraimg.com/images/2016/08/11/1V6u.jpg" class="img-fluid" alt=""></li>
                    <li><img src="https://ultraimg.com/images/2016/08/11/1V6u.jpg" class="img-fluid" alt=""></li>
                    <li><img src="https://ultraimg.com/images/2016/08/11/1V6u.jpg" class="img-fluid" alt=""></li>
                </ul>
            </div>
        </div>
    </div>

标签： javascriptjqueryhtmlcssbootstrap-4

解决方案

这是您的笔的分叉版本。
对于居中部分，我创建了container-grid3 列（似乎是最简单的方法）：

评论后编辑： 我用%而不是px.

.grid-container {
  display: grid;
  overflow: hidden;
  width: 100%;
  grid-template-rows: 1fr 2fr;
  grid-template-columns: repeat(3, 33%);
}

为了调整图像大小，我做了同样的事情：

.scroll-horizontal li {
  display: inline-block;
  overflow: hidden;
  max-width: 33%;
}

.scroll-horizontal .img-fluid {
  max-width: 100%;
  height: auto;
  margin-right: 15px;
}

为了在中间显示第一张图像，我只是添加了第一列大小的边距：

.scroll-horizontal li:first-of-type {
  margin-left: 33%;
}

关于滚动条，我希望它可以工作，但现在它没有：

.space-default::-webkit-scrollbar-track-piece:end {
  margin-right: 33%;
}

.space-default::-webkit-scrollbar-track-piece:start {
  margin-left: 33%;
}

所以我选择完全隐藏它（在Firefox中不起作用）：

.space-default::-webkit-scrollbar {
  display: none;
}

否则对于滚动条样式，您可以查看这篇文章或这篇文章，即使它仅适用于 webkit 浏览器。

希望这有帮助。

推荐阅读