我们在页面

Question

我们在site1一个在另一个之下显示两种信息之前。

1）产品说明2）包装

现在我们在site2中将信息显示为标签。在我们显示为标签后。它不显示全宽信息，您可以在信息的右侧看到空白区域。

我想删除这些空格，并在点击标签后显示在site1中。

.tabs{
        display:inline-block;
        width:250px;
        height:45px;
        line-height:45px;
        cursor:pointer;
        background:orange;
        color:white;
        font-size:19px;
        text-align:center;
    }
    .tabs:hover{
        text-decoration:underline;
    }
    .tabs.active{
        cursor:default;
    }
    .tabs.active:hover{
        text-decoration:none;
    }
    .tab-text{
        display:none;
        width:90%;
        height:auto;
        padding:5%;
    }
    .tab-text.active{
        display:block;
    }

PHTML

<div id="tab-container">
    <div class="tabs active" onclick="changeTab(0)">Product Description</div>
    <div class="tabs" onclick="changeTab(1)">Features</div>
    <div id="tab-1" class="tab-text active">
        <div class="next-content-product">

<h1>Product Description </h1>
<?php echo $_product->getDescription();?>

<div class="size-space">
<h1>Product Size & Space <span class="hidden-sku"><?php echo $_product->getSku();?></span> </h1>


<?php echo $attribute_value = $_product->getData('size_space');?>
</div>


</div>
    </div>
    <div id="tab-2" class="tab-text">
        <div class="next-level-content-product">
<div class="interior-exterior">

<?php echo $attribute_value = $_product->getData('interior_exterior');?>

</div>
</div>
    </div>
</div>

Answer 1

您可以从.tab文本中删除width: 90%，这基本上是您遇到问题的原因

Answer 2

只需添加以下css

即可

.tab-text{
    width:100%;
    padding:0;
 }

Answer 3

.tab-text.active {
    display: initial;
}

使用此功能进行全面显示。