Question

重要的是，该网站可能是NSFW，某些电子书的封面可能是针对成年人的（该网站是关于成年人的浪漫小说）

您好，我正在自定义测试站点（WP +店面+书店儿童主题），我看到了漂亮的顶部栏，带有2个按钮的可靠顶部栏和一个帮助链接。好的，使用一些CSS，我可以使那些元素（带有3个包含按钮和链接文本的SPANS的DIV）响应。如果您调整浏览器屏幕的大小，您会发现按钮和文本调整BUI垂直增长，它们会变高。

我想制造这两个东西之一

1-获取按钮内的文本以适合按钮的宽度，以免其高度增加，使两个按钮保持相同的高度 2或对齐2个按钮，然后将文本从大多数文本（每天获取...）顶部居中，礼品卡中部，帮助文本底部垂直居中。

这可能吗？

注意！

我可以使按钮和文本帮助垂直对齐的唯一方法是使用此代码，但是在调整屏幕大小时的某些时候，它“破坏”了它的流畅性/响应性并变得未对齐，然后出现了小屏幕外观很好通过将该元素与其他2个按钮对齐，我获得了“一定的”响应力

<em>/*Align Help link*/
#help{
  display:inline-block;
    padding-left: 115px;
    padding-right: 115px;
}</em>

预先感谢

此处是CSS

@media screen and (max-width: 768px) {
.site-header .site-branding img {
max-height: none !important;
max-width: none !important;
width: 182px !important;
}
}

/*Remove title from Shop page*/
.woocommerce-products-header
{display: none;}

/*Hide Pages Tite with custom Class added to PHP snippets*/
.hidetitle .entry-header { 
display:none;
}

/*Make primary Pages full width*/
body.woocommerce #primary {
    width: 100%;
}

/*Align Search Bar and make text pink*/
#woocommerce-product-search-field-0 {
    display:inline-block;
    width:100%;
    color: #fe00a1; 
    border: solid 1px #fe00a1; 
}

/*Edited Cart*/
#site-header-cart{
    padding-bottom:0px;
    width:15%;
}

/*Changed cart icon bag f\290 to to cart icon f\217 */
.site-header-cart .cart-contents:after,
.storefront-handheld-footer-bar ul li.cart > a:before {
content: "\f217";
}


/*Align Help link*/
/*#help{
  display:inline-block;
    padding-left: 115px;
    padding-right: 115px;
}

/*Align Gift card*/
/*#gift-cardl{
      margin:auto;
}*/

/*JoinAngel button style*/
.JoinAngel {
    width:auto;
    height: 35px;
    margin-top: 15px;

}
/*Center collague image*/
.collague_image {
display: block;
    margin-left: auto;
    margin-right: auto;
        width:100%;
}

/*Add top padding to rectangle*/
#rectangle {
    padding:17px;
}

/*Remove Storefront footer credit*/
.site-footer .site-info {
    display: none;
}

在此处包含带有SPANS的DIV的HTML

<div class="flex-container" style="text-align:center">  
<span style="display:inline-block; width:30%;height:35px;background-color:white">
<a href="http://sitetest.wigigx.com/product/gift-card/" target="_blank">
<button id="gift-cardl" style="margin: 30 auto">Gift Card</button></a> 
</span>
<span style="display:inline-block; width:30%;height:35px;background-color:white">        
<a id="help" href="https://sitetest.wigigx.com/contact/" target="_blank" style="margin: 30 auto">Help</a>
</span>
<span  style="display:inline-block; width:30%;height:35px;background-color:white">
<a id="Subscribe" href="https://newsletter.naughtyangelpublishing.com/" target="_blank">
<button class="subscribe_newsletter_btn" style="margin: 30 auto">Get Daily Book Bargains</button></a>
</span>  
</div>

提前感谢任何想法

Answer 1

我可以给你一个建议。也许您可以通过滚动来做到这一点。

禁用<span>中的内联样式并将其添加到CSS

@media screen and (max-width: 768px) {
.flex-container span {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100%!important;
    transition: transform 0.5s;
    position: relative;
    display: flex!important;
    justify-content:center;
    align-content:center;
}

.flex-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
}
.flex-container span {display:inline-block; width:30%; height:35px; background-color:white}

或者您可以全部<span>宽100％地做，就像楼梯一样。

@media screen and (max-width: 768px) {
.flex-container span {
    width: 100%!important;
    position: relative;
    display: flex!important;
    justify-content:center;
    align-content:center;
}

.flex-container {
    display: flex;
    flex-direction:column
}
}
.flex-container span {display:inline-block; width:30%; height:35px; background-color:white}

无法使店面顶部标头元素响应（垂直）对齐

1 个答案: