Question

我正在努力使我的旋转木马可以与其他文本共享一个水平行，但由于某种原因，当它设置为占据40％时它占据100％宽度。

我会在下面发布代码和截图。

enter image description here

在上图中，它显示了带有文字的旋转木马，但我希望文字位于旁边。

当我使用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

这似乎是造成边界的因素，而且是100％。

您是否可以更改没有ID或类的div？

如果可能，只需在此div中添加宽度：40％。

<div style="width: 40%; border:2px solid #cecece;margin-left:7%;margin-top:3%;margin-right:7%;padding:1%;">

Answer 2

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

您的外包装div（#carousel-example-generic）已设置为类名.slide（和.carousel .slide btw，它重叠，因此一个定义就足够了），因此{{{通过CSS定义应用了width的1}}。如果您按照其他用户的建议删除了40%，然后将width应用到您的轮播包装器，请在之后添加display:inline-block，并将其设置为div，结束两个元素紧挨着彼此。

See this fiddle for a demonstration

请注意：我添加了外包装，以便更清楚它为什么会起作用以及如何实现。

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

Refer to this page to learn more about browser compatibility

如果您想采取更安全的路线，您可以选择inline-block彼此相邻的两个float元素，但请注意，如果您不想要，则必须clear the floats要显示在div旁边的任何相邻元素。

转盘共享行 - 水平

2 个答案: