CSS：邊框顯示不正確

Question

我試圖在幾個元素之間創建一個垂直的左邊框，我嘗試了一些來自this thread的最受好評的建議，但沒有成功。

目前，邊框看起來是這樣的：

（是的，它是可憐的黑線）

當然，我真正想要的是行至佔據整個左側頁面的一面。所有的建議是非常感謝！

我的ERB文件：

<h1 class="p1_vs_p2"><%= @game.player.name %> vs <%=@game.computer.name %></h2> 
<h2 class="player_chose"> You chose <%= @game.player.weapon.capitalize %></h2> 
<h2 class="computer_chose"><%= @game.computer.name %> chose <%=@game.computer.weapon.capitalize %></h2> 
<div style="clear: both;"></div> 

<% if @game.outcome == Game::POSSIBLE_OUTCOMES[0] %> 
    <h2 class="victory_message"> Congratulations, you win!</h2> 
<% elsif @game.outcome == Game::POSSIBLE_OUTCOMES[1] %> 
    <h2 class="tie_message"> It's a tie!</h2> 
<% else %> 
    <h2 class="defeat_message">You lost this time.</h2> 
<% end %> 

<h4> <a href="/" class="play_again">Play Again</a> </h4> 
<div class="vertical_line"> 

我的CSS文件：

html { 
    height: 100% 
} 

body { 
    background-color: #f4f1ec; 
} 

input[type="radio"]{ 
    margin: 0 5px 0 10px; 
} 

table.center { 
    margin-left:auto; 
    margin-right:auto; 
    } 

.title { 
    padding-top: 40px; 
    text-align: center; 
    font-family: 'Raleway', sans-serif; 
    color: #6495ED; 
    padding-bottom: 100px; 
} 

.input_name_button { 
    position: fixed; 
    text-align: center; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -100px; 
} 

.play_button { 
    text-align: center; 
    padding-top: 30px; 
} 

.p1_vs_p2 { 
    padding-top: 40px; 
    text-align: center; 
    font-family: 'Raleway', sans-serif; 
    color: #B0C4DE; 
    padding-bottom: 100px; 
} 

.player_chose { 
    color: #6495ED; 
    float: left; 
    padding-left: 200px; 
} 


.computer_chose { 
    color: #FFA07A; 
    float: right; 
    padding-right: 50px; 
} 

.victory_message { 
    color: #8FBC8F; 
    text-align: center; 
    bottom: 0px; 
    width: 100%; 
    padding-bottom: 300px; 
    position: fixed; 
} 

.tie_message { 
    color: #FFDEAD; 
    text-align: center; 
    bottom: 0px; 
    width: 100%; 
    padding-bottom: 300px; 
    position: fixed; 
} 

.defeat_message { 
    color: #F08080; 
    text-align: center; 
    bottom: 0px; 
    width: 100%; 
    padding-bottom: 300px; 
    position: fixed; 
} 

a.play_again { 
    color: #A9A9A9; 
    text-align: center; 
    bottom: 0px; 
    width: 100%; 
    padding-bottom: 100px; 
    position: fixed; 
    font-family: 'Raleway', sans-serif; 
    text-decoration: none; 
} 

.vertical_line { 
    width: 4px; 
    background-color: black; 
    height: 100%; 
    float: left; 
} 

讓我知道，如果你有什麼事，我會很樂意提供。謝謝。 :)

Answer 1

你有沒有嘗試把所有的內容在一個股利，並使其邊界屬性是這樣的？

border-top-style: none; 
border-right-style: none; 
border-bottom-style: none; 
border-left-style: solid; 

Answer 2

您可以在下面的CSS添加到您的樣式表：

body { 
    margin-left: 0; 
    border-left: 5px solid black; 
} 

您可能還刪除了一堆，你的標題創造利潤的。

Answer 3

包裹CSS的相關部分的股利和左邊框應用到DIV

這裏是與你的代碼（不考慮你有沒有張貼的腳本，這是導致原因爲所有「％」的東西的內容）：

html { 
 
    height: 100% 
 
} 
 

 
body { 
 
    background-color: #f4f1ec; 
 
} 
 

 
input[type="radio"]{ 
 
    margin: 0 5px 0 10px; 
 
} 
 

 
table.center { 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    } 
 

 
.title { 
 
    padding-top: 40px; 
 
    text-align: center; 
 
    font-family: 'Raleway', sans-serif; 
 
    color: #6495ED; 
 
    padding-bottom: 100px; 
 
} 
 

 
.input_name_button { 
 
    position: fixed; 
 
    text-align: center; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -50px; 
 
    margin-left: -100px; 
 
} 
 

 
.play_button { 
 
    text-align: center; 
 
    padding-top: 30px; 
 
} 
 

 
.p1_vs_p2 { 
 
    padding-top: 40px; 
 
    text-align: center; 
 
    font-family: 'Raleway', sans-serif; 
 
    color: #B0C4DE; 
 
    padding-bottom: 100px; 
 
} 
 

 
.player_chose { 
 
    color: #6495ED; 
 
    float: left; 
 
    padding-left: 200px; 
 
} 
 

 

 
.computer_chose { 
 
    color: #FFA07A; 
 
    float: right; 
 
    padding-right: 50px; 
 
} 
 

 
.victory_message { 
 
    color: #8FBC8F; 
 
    text-align: center; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    padding-bottom: 300px; 
 
    position: fixed; 
 
} 
 

 
.tie_message { 
 
    color: #FFDEAD; 
 
    text-align: center; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    padding-bottom: 300px; 
 
    position: fixed; 
 
} 
 

 
.defeat_message { 
 
    color: #F08080; 
 
    text-align: center; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    padding-bottom: 300px; 
 
    position: fixed; 
 
} 
 

 
a.play_again { 
 
    color: #A9A9A9; 
 
    text-align: center; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    padding-bottom: 100px; 
 
    position: fixed; 
 
    font-family: 'Raleway', sans-serif; 
 
    text-decoration: none; 
 
} 
 

 
.wrapper_for_left_border { 
 
    border-left: 2px solid black; 
 
}

<div class="wrapper_for_left_border"> 
 
<h1 class="p1_vs_p2"><%= @game.player.name %> vs <%=@game.computer.name %></h2> 
 
<h2 class="player_chose"> You chose <%= @game.player.weapon.capitalize %></h2> 
 
<h2 class="computer_chose"><%= @game.computer.name %> chose <%=@game.computer.weapon.capitalize %></h2> 
 
<div style="clear: both;"></div> 
 

 
<% if @game.outcome == Game::POSSIBLE_OUTCOMES[0] %> 
 
    <h2 class="victory_message"> Congratulations, you win!</h2> 
 
<% elsif @game.outcome == Game::POSSIBLE_OUTCOMES[1] %> 
 
    <h2 class="tie_message"> It's a tie!</h2> 
 
<% else %> 
 
    <h2 class="defeat_message">You lost this time.</h2> 
 
<% end %> 
 

 
<h4> <a href="/" class="play_again">Play Again</a> </h4> 
 
</div>