html - 旋转木马共享行 - 水平

Question

我正在努力做到这一点，以便我的旋转木马可以与其他文本共享一个水平行，但由于某种原因它无法正常工作，当它设置为 40% 时它占据了 100% 的宽度。

我将在下面发布代码和屏幕截图。

在上图中，它显示了下方带有文本的轮播，但我希望文本位于其旁边。

当我使用 Chrome 的开发工具包时，它显示边距占据了右侧的整行，但我不相信它在代码 D 的任何地方说:

代码:

<div style="border:2px solid #cecece;margin-left:7%;margin-top:3%;margin-right:7%;padding:1%;">
    <div id="carousel-example-generic" class="carousel slide span4" data-ride="carousel" style="margin:0px !important;">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://images.eurogamer.net/2013/usgamer/league_of_legends.jpg" alt="...">
          <div class="carousel-caption">
            League of Legends
          </div>
        </div>
        <div class="item">
          <img src="http://assets1.ignimgs.com/vid/thumbnails/user/2013/09/03/minecraft.jpg" alt="...">
          <div class="carousel-caption">
            Minecraft
          </div>
        </div>
        <div class="item">
          <img src="http://www.gamerheadlines.com/wp-content/uploads/2013/11/135.jpg" alt="...">
          <div class="carousel-caption">
            Call of Duty: Ghosts
          </div>
        </div>
      </div>
      </div>
     <div class="span5">
        <p>Test</p>
     </div>
     </div>
</div>

CSS:

.carousel{width:40% !important;}
.carousel .slide {
    width:40% !important;
}

Answer 1

除非另有说明，div 元素将显示为 block 元素。除非另有说明，否则此 block 将填充下一个外部容器的整个宽度，该容器已提供宽度或从文档中元素的逻辑顺序派生宽度。

您的外包装器 div (#carousel-example-generic) 被设置为类名 .slide (和 .carousel 。 slide btw，重叠，所以一个定义就足够了)，因此通过 CSS 定义应用了 40% 的 width。如果您按照另一位用户的建议删除了 width，然后将 display:inline-block 应用到您的旋转木马包装器，然后立即添加一个 div这也设置为 display:inline-block，您最终会得到两个相邻的元素。

See this fiddle for a demonstration

请注意:我添加了外部包装器，以便您更清楚它的工作原理和实现方式。

另请注意，虽然 inline-block 现在已得到广泛支持，但仍有一些较旧的浏览器仍然存在，它们的 CSS 属性存在问题。

Refer to this page to learn more about browser compatibility

如果您想采取更安全的路线，您可以选择 float 两个div元素并排放置，但请注意您必须clear the floats如果您不希望任何相邻元素出现在您的 div 旁边。