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>