Question

我有一个包含两个嵌套div的网页。

我需要内部div来显示其边框，但事实并非如此。我已经尝试了所遇到的每一个建议，但没有用。

在尝试不同的解决方案时，我注意到父div确实显示其边框没有太多麻烦。我做错了什么？

CSS

.contentItemsWrapper
{   
    margin:auto;

    width: 900px ;
    margin-left: auto ;
    margin-right: auto ;

    text-align:center;

    padding-top:20px;
    padding-bottom:20px;

    border:solid red;
        border-width:5px 0;
/*this div's border is showing up fine.*/   
}




.contentEventItem {
    font-family: Georgia, "Times New Roman", Times, serif;


    font-style: normal;
    font-weight: normal;
    position: relative;

    border:solid red;
        border-width:5px 0;

/* this last one is not working*/
}

HTLM：

<div class="contentItemsWrapper">                
              <div class="contentEventItem style=" border:solid="" red;="" border-width:5px="" 0;="" "="" id="evento1">            
                <div class="DataIncontro" id="dataIncontro1">
                    <span class="month">Decembre</span>
                    <span class="number">26</span>
                    <span class="time">15:00</span>
                    <span class="day">Gio</span>
                </div>

                <div class="logoSquadra"><span class="helper"></span><img name="" src="images/logo_nbb.png" alt="" style="background-color: #003399"></div>

                <div class="nameEventLocation" id="nameEventLocation1">
                    <strong class="eventname">New Basket Brindisi - Cremonese</strong>
                    <span class="location">Nome Stadio</span>
                </div>

                <div class="logoSquadra"><img name="" src="images/logo_nbb.png" alt="" style="background-color: #003399"></div>


                <div class="noteEvento">Aquistabili online fino al xx dicemnre, ore 20.00</div>


                <div class="buttonDiv">
                  <p>
                    <a class="multi-line-button green" href="#" style="width:14em">
                      <span class="title">Compra Ora!</span>
                      <span class="subtitle">30-days free!</span>
                    </a>
                  </p> 
                </div>

              </div>
            </div>

我做错了什么？有人能帮帮我吗？

非常感谢你的时间。

Answer 1

我很困惑，你想要这个吗？

CSS：

.contentEventItem {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: normal;
    font-weight: normal;
    position: relative;
    border: 1px solid #000;
    /* this last one is now working*/
}

我所做的就是添加border: 1px solid #000;并删除这个奇怪的HTML：

border:solid="" red;="" border-width:5px="" 0;="" "=""

DEMO HERE

Answer 2

 border-width:5px 0;

没有多个边界位置的简写。试试这个。

border-bottom: 5px solid red;
border-top: 5px solid red;
border-left:none;
border-right:none;

儿童Div没有显示边框

2 个答案:

CSS：