Question

我有一组垂直标签，当我尝试嵌套在某些网格或块网格元素中时，所有内容似乎都溢出了元素

即1,2,3应位于下图中的右侧部分 enter image description here

<div class="row">
<div class="medium-8 columns">
    <ul class="tabs vertical" data-tab>
      <li class="tab-title active"><a href="#domainnames">Domain Names</a></li>
      <li class="tab-title"><a href="#webhosting">Web Hosting</a></li>
      <li class="tab-title"><a href="#businesshosting">Business Hosting</a></li>
      <li class="tab-title"><a href="#premiumservices">Premium Services</a></li>
    </ul>
    <div class="tabs-content">
      <div class="content active" id="domainnames">
        <div class="row">
          <div class="medium-12 columns">
            <h1>{$LANG.domaincheckerchoosedomain}</h1>
            <form method="post" action="{$systemsslurl}domainchecker.php">
                <div class="row collapse">
                  <div class="medium-9 columns">
                    <input type="text" name="domain" placeholder="{$LANG.domaincheckerdomainexample}">
                  </div>
                  <div class="medium-3 columns">
                    {if $condlinks.domainreg}<input type="submit" value="{$LANG.checkavailability}" class="button postfix" /> {/if}
                  </div>
                </div>
            </form>
          </div>
        </div>
      </div>
      <div class="content" id="webhosting">
        <ul class="small-block-grid-3">
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
      <div class="content" id="businesshosting">
        <ul class="small-block-grid-3">
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
      <div class="content" id="premiumservices">
        <ul class="small-block-grid-3">
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </div>
  </div>

Answer 1

垂直标签的标签内容div需要垂直类

替换div class =“tabs-content”

div class =“tabs-content vertical”

Answer 2

tabs vertical和tabs-content有一些特殊的属性可以构建到垂直导航结构。

标签tabs vertical获得width: 20%和float:left。

.small-block-grid-3突破了这个浮动。

尝试：

@import "foundation";
.small-block-grid-3 {
margin-left: 20%;
& > li:nth-of-type(3n+1) {
    clear: none;
}
}

演示：http://sassmeister.com/gist/b3c63c443765c4b7ad56

<强>更新

这是标准网格的类似问题吗？

不，我认为您应该能够使用标准网格而无需修改：

<div aria-hidden="false" class="content active" id="panel21">
  <div class="row">
  <div class="small-3 columns">1</div>
  <div class="small-3 columns">2</div>
  <div class="small-3 columns">3</div>
</div>

演示：http://sassmeister.com/gist/29c180401ed433ff2d2d

Zurb Foundation网格或块网格不与垂直制表符一起使用

2 个答案: