Question

这是我使用的基本html代码和css代码。

＆＃13;

.scroll {
  overflow: scroll;
  overflow-x: scroll;
  overflow-y: hidden;
  max-height: 180px !important;
  max-width: 1100px !important;
  position: relative;
  outline: none;
  direction: ltr;
}

＆＃13;

<div class="well">
  <div class="scroll">
    <a href="home.html">
      <img src="images/cupertino.jpg" alt="..." class="image-rounded-active">
    </a>
    <a href="home.html">
      <img src="images/saratoga.jpg" alt="..." class="image-rounded">
    </a>
    <a href="home.html">
      <img src="images/sunnyvale.jpg" alt="..." class="image-rounded">
    </a>
    <a href="home.html">
      <img src="images/milpitas.jpg" alt="..." class="image-rounded">
    </a>
    <a href="home.html">
      <img src="images/santa-clara.jpg" alt="..." class="image-rounded">
    </a>
    <a href="home.html">
      <img src="images/san-mateo.jpg" alt="..." class="image-rounded">
    </a>
    <a href="home.html">
      <img src="images/cupertino.jpg" alt="..." class="image-rounded-active">
    </a>
  </div>
</div>

＆＃13;

有人可以帮我一个横向滚动条吗？

Answer 1

使用溢出来允许滚动条。

.well {
  width: 300px;
  height: 60px;
  overflow-y: hidden;
  overflow-x: auto;
}
.scroll {
  width: 450px;
}
.scroll a {
  float: left;
  margin: 0 10px;
}

<div class="well">
  <div class="scroll">
    <a href="home.html">
      <img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded-active">
    </a>
    <a href="home.html">
      <img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded">
    </a>
    <a href="home.html">
      <img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded">
    </a>
    <a href="home.html">
      <img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded">
    </a>
    <a href="home.html">
      <img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded">
    </a>
    <a href="home.html">
      <img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded">
    </a>
    <a href="home.html">
      <img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded-active">
    </a>
  </div>
</div>

Answer 2

添加以下css -

.scroll { width: 990px; overflow-x: scroll; } /*define the width value to the point from where you want horizontal scroll*/

Answer 3

试试这个

.scroll {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  white-space: nowrap;
  display: inline-block;
  width: 300px;
  margin: 10px;
}

DEMO FIDDLE

Answer 4

通过css你可以实现这个

  .scroll{
     overflow-x:scroll;
     height:200px;
     width:400px;
  }

by jquery

  $(document).ready(function(){
          $(".scroll").css({'overflow-x':'scroll','height':'200px','width':'400px'});
    })

Answer 5

您必须将overflow属性设置为auto或scroll。

滚动

内容被剪裁，桌面浏览器使用滚动条，无论是否剪切任何内容。这避免了任何问题   滚动条在动态环境中出现和消失。   打印机可能会打印溢出的内容。

自动

取决于用户代理。如果内容溢出，Firefox等桌面浏览器会提供滚动条。

body {
  margin: 0;
}
.well {
  width: 100%;
}
.scroll {
  width: 100%;
  background: blue;
  overflow: auto;
  white-space: nowrap;
}
.scroll a {
  display: inline-block;
  width: 140px;
  margin: 10px;
}
.scroll a img {
  width: 100%;
}

<div class="well">
  <div class="scroll">
    <a href="#">
      <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded-active">
    </a>
    <a href="#">
      <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded">
    </a>
    <a href="#">
      <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded">
    </a>
    <a href="#">
      <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded">
    </a>
    <a href="#">
      <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded">
    </a>
    <a href="#">
      <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded">
    </a>
    <a href="#">
      <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded-active">
    </a>
  </div>
</div>

参考：MDN - overflow

Answer 6

请检查以下小提琴：

JSFiddle

    private void RemoveSection(DocX doc, string deleteCommand, string deleteEndCommand)
    {
        try
        {
            int deleteStart = 0;
            int deleteEnd = 0;

            //Get the array of the paragraphs containing the start and end catches
            for (int i = 0; i < doc.Paragraphs.Count; i++)
            {
                if (doc.Paragraphs[i].Text.Contains(deleteCommand))
                    deleteStart = i;
                if (doc.Paragraphs[i].Text.Contains(deleteEndCommand))
                    deleteEnd = i;
            }

            if (deleteStart > 0 && deleteEnd > 0)
            {
                //delete from the paraIndex as the arrays will shift when a paragraph is deleted
                int paraIndex = deleteStart;
                for (int i = deleteStart; i <= deleteEnd; i++)
                {
                    doc.RemoveParagraphAt(paraIndex);
                }
            }
        }
        catch (Exception ex)
        {
            MessageBox.Show(ex.ToString());
        }
    }

我无法在html前端获得水平滚动条

6 个答案: