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;

Answer 2

您可以将以下CSS添加到样式表中：

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

您还可能需要删除标题创建的一堆边距。

Answer 3

将CSS的相关部分包装在div中，并将左边框应用于该DIV

以下是您的代码产生的结果（未考虑您尚未发布的脚本，这就是内容中所有内容的原因所在＆＃34;％＆＃34;内容）：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

CSS：边框无法正常显示

3 个答案: