Html 仅通过水平滚动定位嵌套的div_Html_Css

Html 仅通过水平滚动定位嵌套的div

html css

Html 仅通过水平滚动定位嵌套的div,html,css,Html,Css,在我提供的示例中，我只需要水平滚动。现在我知道这里有类似问题的帖子，答案很简单，就像CSS中有{overflow-x:auto；和overflow-y:hidden；}。我试过了，出于某种原因，我没有得到我想要的结果。我想要的是只有水平滚动。我需要这样做，以便在HTML文件中添加更多特性和链接时，它不会像在JSFIDLE中那样下拉。我的整个代码如下所示： CSS: body { font-family: "marcellus sc"; } body p{ font-family: "t

在我提供的示例中，我只需要水平滚动。

现在我知道这里有类似问题的帖子，答案很简单，就像CSS中有

{overflow-x:auto；和overflow-y:hidden；}

。我试过了，出于某种原因，我没有得到我想要的结果。我想要的是只有水平滚动。我需要这样做，以便在HTML文件中添加更多特性和链接时，它不会像在JSFIDLE中那样下拉。我的整个代码如下所示：

CSS:

body {
  font-family: "marcellus sc";
}

body p{
  font-family: "trebuchet ms";
  letter-spacing: 2px;
}

.links_wrapper {
  background-color: rgba(246,217,90,0.7);
  border:3px solid #c5a101;
  border-radius: 8px;
  height: 398px;
  width:95%;
  margin:auto;
  text-align: center;
  position: relative;
  padding: 5px;
}

.links_title {
  height: 40px;
  width:98%;
  margin-left: auto;
  margin-right: auto;
  float: left;
  text-align: left;
  font-size: 25px;
  letter-spacing: 4px;
  font-weight: 100;
  text-shadow: 2px 2px 2px #666;
}

.scroll {
  overflow-x: auto;
  overflow-y: auto;
  height: 358px;
  width:98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

.ind_blocks {
  margin: 0;
  box-sizing: border-box;
  height: 348px;
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  float: left;
  background-color: rgba(248,217,10,0.4);
  padding: 5px;
}

.ind_blocks div {
  padding: 5px;
  box-sizing: border-box;
  height: 100%;
  width:20%;
  float: left;
  background-color: rgba(90,90,90,0.7);
  border: 2px solid #c5a101;
  border-radius: 8px;
}

.ind_blocks div:hover {
  background-color: rgba(10,10,10,0.5);
  color: #ffd000;
}

.ind_blocks div #under_constr {
  padding-bottom: 10px;
  box-sizing: padding-box;
  width: 100%;
  height: 100px;
  display:none;
  top:100px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: auto;
  margin-top: auto;
  z-index: 10;
}

.ind_blocks div:hover > #under_constr {
  display: block;
  color: #fff;
}

div .img_n_text {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: rgba(99,199,249,0.5);
  text-align: center;
}

div .img_n_text img {
  width: 97%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

div .img_n_text h4 {
  margin: 0;
  padding: 2px;
}

div .img_n_text p {
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  font-weight: 200;
}

<div class="links_wrapper">
  <div class="links_title">Head Menu:</div>
  <div class="scroll">

    <div class="ind_blocks">
      <a style="text-decoration:none; " href=""  >
        <div>
          <div id="under_constr">
            <p>Under Construction</p>
          </div>
          <div class="img_n_text">
            <img src="img/blubox149x121.jpg" />
            <h4>Head1</h4>
            <p>Aut fabulas do probant.</p>
          </div>
        </div>
      </a>

      <a style="text-decoration:none; " href=""  >
        <div>
          <div id="under_constr">
            <p>Under Construction</p>
          </div>
          <div class="img_n_text">
            <img src="img/blubox149x121.jpg" />
            <h4>head2</h4>
            <p>Id esse consequat arbitror.</p>
          </div>
        </div>
      </a>

      <a style="text-decoration:none; " href=""  >
        <div>
          <div id="under_constr">
            <p>Under Construction</p>
          </div>
          <div class="img_n_text">
            <img src="img/blubox149x121.jpg.jpg" />
            <h4>head3</h4>
            <p>Se tamen cohaerescant.</p>
          </div>
        </div>
      </a>

      <a style="text-decoration:none; " href=""  >
        <div>
          <div id="under_constr">
            <p>Under Construction</p>
          </div>
          <div class="img_n_text">
            <img src="img/blubox149x121.jpg.jpg" />
            <h4>head4</h4>
            <p>Anim voluptate de labore fore.</p>
          </div>
        </div>
      </a>

      <a style="text-decoration:none; " href=""  >
        <div>
          <!--<div id="under_constr">
            <p>Under Construction</p>
          </div>-->
          <div class="img_n_text">
            <img src="img/blubox149x121.jpg.jpg" />
            <h4>Links</h4>
            <p>Hic offendit ex admodum.</p>
          </div>
        </div>
      </a>

      <a style="text-decoration:none; " href=""  >
        <div>
          <div id="under_constr">
            <p>Under Construction</p>
          </div>
          <div class="img_n_text">
            <img src="img/blubox149x121.jpg.jpg" />
            <h4>Sixth Link</h4>
            <p>If more features gets added...</p>
          </div>
        </div>
      </a>

    </div>

  </div>

</div>

HTML:

body {
  font-family: "marcellus sc";
}

body p{
  font-family: "trebuchet ms";
  letter-spacing: 2px;
}

.links_wrapper {
  background-color: rgba(246,217,90,0.7);
  border:3px solid #c5a101;
  border-radius: 8px;
  height: 398px;
  width:95%;
  margin:auto;
  text-align: center;
  position: relative;
  padding: 5px;
}

.links_title {
  height: 40px;
  width:98%;
  margin-left: auto;
  margin-right: auto;
  float: left;
  text-align: left;
  font-size: 25px;
  letter-spacing: 4px;
  font-weight: 100;
  text-shadow: 2px 2px 2px #666;
}

.scroll {
  overflow-x: auto;
  overflow-y: auto;
  height: 358px;
  width:98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

.ind_blocks {
  margin: 0;
  box-sizing: border-box;
  height: 348px;
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  float: left;
  background-color: rgba(248,217,10,0.4);
  padding: 5px;
}

.ind_blocks div {
  padding: 5px;
  box-sizing: border-box;
  height: 100%;
  width:20%;
  float: left;
  background-color: rgba(90,90,90,0.7);
  border: 2px solid #c5a101;
  border-radius: 8px;
}

.ind_blocks div:hover {
  background-color: rgba(10,10,10,0.5);
  color: #ffd000;
}

.ind_blocks div #under_constr {
  padding-bottom: 10px;
  box-sizing: padding-box;
  width: 100%;
  height: 100px;
  display:none;
  top:100px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: auto;
  margin-top: auto;
  z-index: 10;
}

.ind_blocks div:hover > #under_constr {
  display: block;
  color: #fff;
}

div .img_n_text {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: rgba(99,199,249,0.5);
  text-align: center;
}

div .img_n_text img {
  width: 97%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

div .img_n_text h4 {
  margin: 0;
  padding: 2px;
}

div .img_n_text p {
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  font-weight: 200;
}

<div class="links_wrapper">
  <div class="links_title">Head Menu:</div>
  <div class="scroll">

    <div class="ind_blocks">
      <a style="text-decoration:none; " href=""  >
        <div>
          <div id="under_constr">
            <p>Under Construction</p>
          </div>
          <div class="img_n_text">
            <img src="img/blubox149x121.jpg" />
            <h4>Head1</h4>
            <p>Aut fabulas do probant.</p>
          </div>
        </div>
      </a>

      <a style="text-decoration:none; " href=""  >
        <div>
          <div id="under_constr">
            <p>Under Construction</p>
          </div>
          <div class="img_n_text">
            <img src="img/blubox149x121.jpg" />
            <h4>head2</h4>
            <p>Id esse consequat arbitror.</p>
          </div>
        </div>
      </a>

      <a style="text-decoration:none; " href=""  >
        <div>
          <div id="under_constr">
            <p>Under Construction</p>
          </div>
          <div class="img_n_text">
            <img src="img/blubox149x121.jpg.jpg" />
            <h4>head3</h4>
            <p>Se tamen cohaerescant.</p>
          </div>
        </div>
      </a>

      <a style="text-decoration:none; " href=""  >
        <div>
          <div id="under_constr">
            <p>Under Construction</p>
          </div>
          <div class="img_n_text">
            <img src="img/blubox149x121.jpg.jpg" />
            <h4>head4</h4>
            <p>Anim voluptate de labore fore.</p>
          </div>
        </div>
      </a>

      <a style="text-decoration:none; " href=""  >
        <div>
          <!--<div id="under_constr">
            <p>Under Construction</p>
          </div>-->
          <div class="img_n_text">
            <img src="img/blubox149x121.jpg.jpg" />
            <h4>Links</h4>
            <p>Hic offendit ex admodum.</p>
          </div>
        </div>
      </a>

      <a style="text-decoration:none; " href=""  >
        <div>
          <div id="under_constr">
            <p>Under Construction</p>
          </div>
          <div class="img_n_text">
            <img src="img/blubox149x121.jpg.jpg" />
            <h4>Sixth Link</h4>
            <p>If more features gets added...</p>
          </div>
        </div>
      </a>

    </div>

  </div>

</div>


标题菜单：

我试图主要通过CSS解决这个问题，并将JavaScript作为最后手段使用。
我做错了什么？或者我错过了什么？

更新：我附上了一个屏幕截图，上面是我应用RCNeil的答案后得到的结果，。它仍然没有做我想做的事。我目前正在浏览其他答案，看看哪一个适合我的需要。我会很快更新。很抱歉，我的代码混乱且效率低下。我仍然在学习细节，还有什么更好的学习方法，不是吗？再次感谢您的帮助。

这是一个“最简单”的例子，说明您试图实现的效果。注意，这里只有一个div，其子对象水平排列并在x轴上滚动

主要的技巧是空白：nowrap；在要滚动的div上，并确保重置空白：normal；在它的子对象上，这样文本就会按照您的预期进行包装

小提琴：

HTML:

你是说悬停时透明的黑色div会跳出框外，这就是你的问题吗？显示：flex、table或inline block+child上的白色即可。flex示例：您应该首先设置水平滚动结果的样式，然后将您的“设计/颜色”样式应用于整个内容。您的代码有点凌乱和低效：），祝您好运，我想到的3个选项是：flex”“**table inline block@GCyrillus-您已经给出了一系列选择！太快了！！！我通过在“a”块中添加另一个div块修改了JSFIDLE。可以在这里找到出口。。输出是什么使一些块向下滑动？@Sai-ah，添加垂直对齐：top；到。滚动定义将修复它！谢谢，我可以修改一下你的解决方案来满足我的需要。还感谢用户“智能鬣蜥”在我的JSFIDLE中帮助我。我希望我能在投票/分数上给你一个+1。但是由于我的成绩，我不能做这件事lot@Sai很高兴提供帮助！祝项目顺利：）