html - 如何在网格上添加水平线

问题描述

嗨，我想在网格上添加水平线。

我的要求是这样的。

这是 4 列自举网格。

但我得到了这个。

我的 HTML 代码如下。

 <div class="row">
 <hr style="width:100%;text-align:left;margin-left:0">
    <spam style="border-bottom: solid 1px #DEDEDE"></spam>
                <div class="col-md-5 col-sm-12 col-xs-12 collapsible">
                    <div class="row">

                        <div class="col-md-6 col-sm-6 col-xs-12 wc-footer">

        <ul class="footer links">
                <li style="font-size: 20px; font-family: Myriad Pro; font-weight: 700; padding-bottom: 20px;"><b><?php echo  __('About us')?></b></li>
                <hr>
                <li class="nav item" href="#" style="font-size: 16px; font-family: Myriad Pro; font-weight: 400;"><a href="" ><?php echo __('cart')?></a></li>
                <li class="nav item" href="#" style="font-size: 16px; font-family: Myriad Pro; font-weight: 400;"><a href="" ><?php echo __('favorate product')?></a></li>
                <li class="nav item" href="#" style="font-size: 16px; font-family: Myriad Pro; font-weight: 400;"><a href="" ><?php echo __('About the Group')?></a></li>
                <li class="nav item" href="#" style="font-size: 16px; font-family: Myriad Pro; font-weight: 400;"><a href="" ><?php echo __('Business and financial reports')?></a></li>
                <li class="nav item" href="#" style="font-size: 16px; font-family: Myriad Pro; font-weight: 400;"><a href="" ><?php echo __('Strategy')?></a></li>
                <li class="nav item" href="#" style="font-size: 16px; font-family: Myriad Pro; font-weight: 400;"><a href="" ><?php echo __('Imprint')?></a></li>
                <li class="nav item" href="#" style="font-size: 16px; font-family: Myriad Pro; font-weight: 400;"><a href="" ><?php echo __('Cookie statement')?></a></li>
                <li class="nav item" href="#" style="font-size: 16px; font-family: Myriad Pro; font-weight: 400;"><a href="" ><?php echo __('Privacy Policy<')?>/a></li>
                <li class="nav item" href="#" style="font-size: 16px; font-family: Myriad Pro; font-weight: 400;"><a href="" ><?php echo __('Terms of sale via online store')?></a></li>
            </ul>
        </div>
    
    
      <div class="col-md-6 col-sm-6 col-xs-12 wc-footer">
        <ul class="footer links">
                <li style="font-size: 20px; font-family: Myriad Pro; font-weight: 700; padding-bottom: 20px; "><b><?php echo  __('Quick Links') ?></b></li>
                <hr>
                <li class="nav item" href="#" style="font-size: 16px; font-family: Myriad Pro; font-weight: 400;"><a href="" ><?php echo __('Imprint')?></a></li>
                <li class="nav item" href="#" style="font-size: 16px; font-family: Myriad Pro; font-weight: 400;"><a href="" ><?php echo __('Cookie statement')?></a></li>
                <li class="nav item" href="#" style="font-size: 16px; font-family: Myriad Pro; font-weight: 400;"><a href="" ><?php echo __('Privacy Policy')?></a></li>
                <li class="nav item" href="#" style="font-size: 16px; font-family: Myriad Pro; font-weight: 400;"><a href="" ><?php echo __('BTerms of sale via online store')?></a></li>
            </ul>
      </div>
    
</div>

</div>
    
    <div class="col-md-3 col-sm-6 col-xs-12 wc-footer">
        <ul class="footer links">
                <li style="font-size: 20px; font-family: Myriad Pro; font-weight: 700; padding-bottom: 20px; "><b><?php echo __('Pratite nas')?></b></li>
                <hr>
                <li class="nav item" href="#" style="font-size: 16px; font-family: Myriad Pro; font-weight: 400; padding-bottom: 20px;"><a href="" ><img src='<?php echo $this->getViewFileUrl('images/facebook.png'); ?>'  style="margin-right:30px; display: inline-block;
                    vertical-align: middle;"><?php echo __('Facebook')?></a></li>
                <li class="nav item" href="#" style="font-size: 16px; font-family: Myriad Pro; font-weight: 400; padding-bottom: 20px;"><a href="" ><img src='<?php echo $this->getViewFileUrl('images/linkedin.png'); ?>'  style="margin-right:20px; display: inline-block;
                    vertical-align: middle;"><?php echo __('Linkedin')?></a></li>
                <li class="nav item" href="#" style="font-size: 16px; font-family: Myriad Pro; font-weight: 400; padding-bottom: 20px;"><a href="" ><img src='<?php echo $this->getViewFileUrl('images/youtube.png'); ?>'  style="margin-right:15px; display: inline-block;
                    vertical-align: middle;"> <?php echo __('YouTube')?></a></li>
                <li class="nav item" href="#" style="font-size: 16px; font-family: Myriad Pro; font-weight: 400;"><a href="" ><img src='<?php echo $this->getViewFileUrl('images/instagram.png'); ?>'  style="margin-right:15px; display: inline-block;
                    vertical-align: middle;"> <?php echo __('Instagram')?></a></li>
                </ul>
    </div>

<div class="col-md-4 col-sm-6 col-xs-12 wc-footer">
    <ul class="footer links">
                <li style="font-size: 20px; font-family: Myriad Pro; font-weight: 700; padding-bottom: 20px;"><b><?php echo __('Kontakt')?></b></li>
                <hr>
                <li style="font-size: 16px; font-family: Myriad Pro; font-weight: 400;"><div><?php echo __('For offers or inquiries call our toll-free number 0800 4260.')?></div></li>
                
                <li style="font-size: 16px; font-family: Myriad Pro; font-weight: 400; padding-bottom: 20px;"><div><?php echo __('MON - FRI from 08:00 - 16:00')?></div></li>

                
    </ul>
</div>

</div>

我想知道如何在盒子上添加水平线。基本上我想要在网格上覆盖一层水平线。

任何帮助表示赞赏。

标签： htmlcss

你拥有它的方式在移动设备上看起来很棒，但在桌面上，人力资源并没有像指出的那样一路走来。

问题是解决这个问题的方法是将所有标题放在一行中，四列，一行用于 HR，然后一行四列用于列表项。问题是在移动设备上，标题将与您的列表项分开，因为它将呈现所有四个标题，HR，然后是所有四个列表。

我认为一个可能的解决方法是将 HR 设置为全宽，然后给它负边距以跨越列之间的间隙。像这样的东西：

<hr style="width: calc(100% + 30px); margin-left: -15px; margin-right: -15px;">

考虑不要将 HR 标签放在 UL 标签的中间。您的标头可以使用<h2>并启动<ul>之后，如下所示：

<h2><?php echo __('Pratite nas')?></h2>
<hr style="width: calc(100% + 30px); margin-left: -15px; margin-right: -15px;">
<ul class="footer links">
    <li ...

此外，当您决定样式的外观时，您可以将 CSS 从样式标签移动到 CSS 类。这将使您的代码更易于维护。

html - 如何在网格上添加水平线

问题描述

解决方案

推荐阅读