爲什麼鏈接顯示在下一行而不是相同？

Question

我有下面這個網站：

：如下圖所示的圖片

body { 
 
     font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif; 
 
    } 
 
    
 
    .primary { 
 
     padding-top: 20px; 
 
    } 
 
    
 
    .upcoming-events { 
 
     border: 1px solid #E7EAEC; 
 
     background-color: #FFF; 
 
     width: 100%; 
 
     position: relative; 
 
    } 
 
    
 
    .upcoming-events-header { 
 
     border-bottom: 1px solid #E7EAEC; 
 
     padding: 20px 10px; 
 
     color: #2F343B; 
 
    } 
 
    
 
    .upcoming-events-header-text { 
 
     display: block; 
 
    } 
 
    
 
    .upcoming-count { 
 
     font-weight: 700; 
 
    } 
 
    
 
    .event { 
 
     position: relative; 
 
     padding: 10px; 
 
     display: block; 
 
    } 
 
    
 
    .event-date-container { 
 
     height: 65px; 
 
     border-right: 1px solid #CFD4D9; 
 
     display: table-cell; 
 
     vertical-align: middle; 
 
     width: 65px; 
 
    } 
 
    
 
    .day-label { 
 
     width: 100%; 
 
     color: #00A1A1; 
 
     text-transform: uppercase; 
 
     display: block; 
 
     font-family: 'Interstate', 'Helvetica Neue', 'Helvetica', 'Arial', 'Sans-Serif'; 
 
     letter-spacing: -0.2px; 
 
     font-size: 20px; 
 
     text-align: center; 
 
     font-weight: 700; 
 
    } 
 
    
 
    .date-label { 
 
     text-align: center; 
 
     font-size: 11px; 
 
     display: block; 
 
     letter-spacing: -0.1px; 
 
     color: #87909A; 
 
     width: 100%; 
 
     text-transform: uppercase; 
 
     margin-top: 2px; 
 
     line-height: 14px; 
 
     font-weight: 500; 
 
    } 
 
    
 
    .event-info-container { 
 
     
 
    } 
 
    
 
    a { 
 
     color: #085F99; 
 
     text-decoration: none; 
 
     cursor: pointer; 
 
    }

 <section class="primary"> 
 
      <div class="upcoming-events"> 
 
       <div class="upcoming-events-header"> 
 
        <div class="upcoming-events-header-text"> 
 
         <span class="upcoming-count">95</span> 
 
         Games 
 
        </div> 
 
       </div> 
 
       <div class="upcoming-events-body"> 
 
        <div class="event"> 
 
         <div class="event-date-container"> 
 
          <span class="day-label">FRI</span> 
 
          <span class="date-label">July 25</span> 
 
         </div> 
 
         <div class="event-info-container"> 
 
          <a>Pittsburgh Pirates</a> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </section>

問題是Pittsburgh Pirates鏈接不會出現在它們的權利，但在底部

有人可以告訴我如何將Pittsburgh Pirates移動到右邊（基本上在該垂直之後校準邊界）？

Answer 1

因爲你沒有讓你.event-info-container一個表單元格，就像event-date-container之前。

使用此CSS它以獲得所需的顯示::

.event-info-container { 
    display: table-cell; 
    vertical-align: middle; 
    padding-left: 20px; 
}; 

body { 
 
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, "Lucida Grande", sans-serif; 
 
} 
 

 
.primary { 
 
    padding-top: 20px; 
 
} 
 

 
.upcoming-events { 
 
    border: 1px solid #E7EAEC; 
 
    background-color: #FFF; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
.upcoming-events-header { 
 
    border-bottom: 1px solid #E7EAEC; 
 
    padding: 20px 10px; 
 
    color: #2F343B; 
 
} 
 

 
.upcoming-events-header-text { 
 
    display: block; 
 
} 
 

 
.upcoming-count { 
 
    font-weight: 700; 
 
} 
 

 
.event { 
 
    position: relative; 
 
    padding: 10px; 
 
    display: block; 
 
} 
 

 
.event-date-container { 
 
    height: 65px; 
 
    border-right: 1px solid #CFD4D9; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    width: 65px; 
 
} 
 

 
.day-label { 
 
    width: 100%; 
 
    color: #00A1A1; 
 
    text-transform: uppercase; 
 
    display: block; 
 
    font-family: 'Interstate', 'Helvetica Neue', 'Helvetica', 'Arial', 'Sans-Serif'; 
 
    letter-spacing: -0.2px; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    font-weight: 700; 
 
} 
 

 
.date-label { 
 
    text-align: center; 
 
    font-size: 11px; 
 
    display: block; 
 
    letter-spacing: -0.1px; 
 
    color: #87909A; 
 
    width: 100%; 
 
    text-transform: uppercase; 
 
    margin-top: 2px; 
 
    line-height: 14px; 
 
    font-weight: 500; 
 
} 
 

 
.event-info-container { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding-left: 20px; 
 
} 
 

 
a { 
 
    color: #085F99; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<section class="primary"> 
 
    <div class="upcoming-events"> 
 
    <div class="upcoming-events-header"> 
 
     <div class="upcoming-events-header-text"> 
 
     <span class="upcoming-count">95</span> Games 
 
     </div> 
 
    </div> 
 
    <div class="upcoming-events-body"> 
 
     <div class="event"> 
 
     <div class="event-date-container"> 
 
      <span class="day-label">FRI</span> 
 
      <span class="date-label">July 25</span> 
 
     </div> 
 
     <div class="event-info-container"> 
 
      <a>Pittsburgh Pirates</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 2

您需要將以下內容添加到您的css文件中。這是你可以很容易地從其他職位找到實話..

.event div { 
    display: inline-block; 
} 

https://codepen.io/julysfx/pen/proBOq

Answer 3

使用display: flex在容器上。

body { 
 
     font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif; 
 
} 
 
    
 
.primary { 
 
    padding-top: 20px; 
 
} 
 
    
 
.upcoming-events { 
 
    border: 1px solid #E7EAEC; 
 
    background-color: #FFF; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
    
 
.upcoming-events-header { 
 
    border-bottom: 1px solid #E7EAEC; 
 
    padding: 20px 10px; 
 
    color: #2F343B; 
 
} 
 
    
 
.upcoming-events-header-text { 
 
    display: block; 
 
} 
 
    
 
.upcoming-count { 
 
    font-weight: 700; 
 
} 
 
    
 
.event { 
 
    position: relative; 
 
    padding: 10px; 
 
    display: flex; 
 
} 
 
    
 
.event-date-container { 
 
    height: 65px; 
 
    border-right: 1px solid #CFD4D9; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    width: 65px; 
 
} 
 
    
 
.day-label { 
 
    width: 100%; 
 
    color: #00A1A1; 
 
    text-transform: uppercase; 
 
    display: block; 
 
    font-family: 'Interstate', 'Helvetica Neue', 'Helvetica', 'Arial', 'Sans-Serif'; 
 
    letter-spacing: -0.2px; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    font-weight: 700; 
 
} 
 
    
 
.date-label { 
 
    text-align: center; 
 
    font-size: 11px; 
 
    display: block; 
 
    letter-spacing: -0.1px; 
 
    color: #87909A; 
 
    width: 100%; 
 
    text-transform: uppercase; 
 
    margin-top: 2px; 
 
    line-height: 14px; 
 
    font-weight: 500; 
 
} 
 
    
 
.event-info-container { 
 
    padding: 22px; 
 
} 
 
    
 
a { 
 
    color: #085F99; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<section class="primary"> 
 
    <div class="upcoming-events"> 
 
    <div class="upcoming-events-header"> 
 
     <div class="upcoming-events-header-text"> 
 
     <span class="upcoming-count">95</span> 
 
         Games 
 
     </div> 
 
    </div> 
 
    <div class="upcoming-events-body"> 
 
     <div class="event"> 
 
     <div class="event-date-container"> 
 
      <span class="day-label">FRI</span> 
 
      <span class="date-label">July 25</span> 
 
     </div> 
 
     <div class="event-info-container"> 
 
      <a>Pittsburgh Pirates</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>