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

您是否尝试过将所有内容放在一个 div 中并使其具有这样的边框属性？

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