html - 我需要帮助正确对齐我的一个 HTML 框

问题描述

我的 HTML 和 CSS 代码需要帮助。我需要帮助将大盒子向右对齐。我尝试在另一篇文章中问这个问题，但最后我问了太多问题。我是新来的。但无论如何我需要帮助。

我正在尝试获取我的 HTML：

* {
  margin: 0px auto;
  padding: 0px auto;
  font-family: sans-serif;
}

body {
  background-color: lightgray;
}

.live_scores {
  background-color: white;
  height: 55px;
  width: auto;
}

.score_header {
  display: flex;
  justify-content: space-evenly;
}

.live_scores_head {
  color: black;
  background-color: white;
  padding-left: 50px;
}

.DSNN_Header {
  background-color: black;
  display: flex;
  justify-content: space-evenly;
  height: 55px;
}

.DSNN {
  color: whitesmoke;
  font-style: italic;
  background-color: red;
  font-weight: bolder;
  transform: rotateY(23px);
}

.sport_list {
  color: whitesmoke;
  text-align: center;
  padding-top: 5px;
  font-size: 25px;
}

.search_icon {
  height: 33px;
  width: 28px;
  padding-top: 5px;
  padding-left: 5px;
}

.hamburger {
  height: 34px;
  width: 29px;
  padding-top: 5px;
  padding-right: 5px;
}

.user_icon {
  height: 34px;
  width: 29px;
  padding-top: 5px;
  padding-left: 5px;
}

.col1 {
  display: inline-block;
  padding-top: 10px;
  padding-left: 35px;
  margin-top: 5px;
}

.box_1 {
  background-color: white;
  border: transparent 2px;
  height: 200px;
  width: 270px;
  display: block;
  border-radius: 5px;
  padding-top: 5px;
}

.top-stories {
  text-decoration: underline;
  text-align: center;
  padding-right: 50px;
}

.box_1_list {
  text-align: left;
  padding-left: 15px;
}

.box_1_text {
  font-size: 15px;
  padding-top: 8px;
}

.box_2 {
  background-color: white;
  padding-top: 10px;
  margin-top: 15px;
  border-radius: 5px;
  border: transparent 2px;
  height: 120px;
}

.custom_dsnn {
  text-align: center;
  text-decoration: solid;
}

.button_row {
  display: flex;
  padding-left: 20px;
  padding-top: 25px;
}

.button1 {
  background-color: blue;
  padding: 5px 5px;
  width: 110px;
  box-shadow: 3px 3px;
  border: solid 3px;
}

.signup {
  background-color: white;
  border: solid 3px;
  box-shadow: 3px 3px;
  width: 110px;
}

#box_3 {
  padding-top: 10px;
  margin-top: 15px;
  border: transparent 2px;
  height: 120px;
  border-radius: 5px;
  background-color: white;
}

.disappear {
  background-color: bisque;
  border: solid 3px;
  margin-left: 65px;
  margin-top: 50px;
  box-shadow: 3px 3px;
}

.never {
  text-align: center;
  text-decoration: solid;
}

.col2 {
  display: inline;
  padding-left: 95px;
  margin: 20px 20px;
}

.box_4 {
  background-color: white;
  border-radius: 5px;
  border: transparent 5px;
  height: 700px;
  width: 880px;
  margin-left: 600px;
  margin-bottom: 1800px;
  object-position: 5px;
}

.box4_headline {
  margin-right: 15px;
  font-size: 33px;
  text-align: right;
}

.live_symbol {
  align-content: left;
  height: 60px;
  width: 95px;
  margin-left: 5px;
}

.b4_list1 {
  position: left;
  justify-content: space-between;
  object-position: 800px;
}

.b4_list2 {
  position: right;
  justify-content: space-between;
  object-position: 500px;
}

.ninja1 {
  color: lightseagreen;
  font-size: 35px;
}

.ninja_symbol {
  height: 155px;
  width: 170px;
  padding-top: 10px;
  padding-left: 5px;
}

.tenw {
  color: lightgray;
  font-size: 15px;
}

.ninjascore {
  font-size: 50px;
}

.ninascore1 {
  background: transparent;
  font-size: 50px;
}

.pirate_symbol {
  height: 155px;
  width: 170px;
}

.pirate1 {
  color: red;
  font-size: 35px;
}

.twelvew {
  color: lightgray;
  font-size: 15px;
}

.vs {
  text-align: center;
}

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  margin-bottom: 15px;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.gameinfo {
  border-top: black solid;
  text-align: center;
}

.readmore {
  color: lightskyblue;
}

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> The Ninjas have just won!
</div>
<div class="live_scores">
  <div class="score_header">
    <h1 class="live_scores_head">Live Scores</h1>
    <ul>
      <ul>SJC Ninjas - 314</ul>
      <ul>NS Pirates - 159</ul>
    </ul>
    <ul>
      <ul>CHI Samurai - 0</ul>
      <ul>TUL Wizards - 0</ul>
    </ul>
    <ul>
      <ul>BOS Hackers - 13</ul>
      <ul>TYO Youkai - 37</ul>
    </ul>
    <ul>
      <ul>BOI Knights - 5</ul>
      <ul>SEA Sea Lions- 11</ul>
    </ul>
  </div>
</div>
<div class="DSNN_section">
  <div class="DSNN_Header">
    <h1 class="DSNN">&nbsp DSNN &nbsp</h1>
    <p class="sport_list">Football</p>
    <p class="sport_list">Basketball</p>
    <p class="sport_list">Baseball</p>
    <p class="sport_list">Soccer</p>
    <p class="sport_list">More...</p>
    <img src="assets\search-light.png" class="search_icon">
    <img src="assets\hamburger-light.png" class="hamburger">
    <img src="assets\user-circle-light.png" class="user_icon">
  </div>
</div>
<div class="col1">
  <div class="box_1">
    <h1 class="top-stories">Top Stories</h1>
    <ul class="box_1_list">
      <ul class="box_1_text">Ninjas up big in 5th</ul>
      <ul class="box_1_text">Best sports cities</ul>
      <ul class="box_1_text">Choi joins Hall of Fame</ul>
      <ul class="box_1_text">Tournament underway</ul>
      <ul class="box_1_text">Samurai at Wizards...</ul>
    </ul>
  </div>
  <div class="box_2">
    <h4 class="custom_dsnn">Customize Your DSNN</h4>
    <div class="button_row">
      <button class="button1" type="submit">Sign In</button>
      <button class="signup" type="submit">Sign Up</button>
    </div>
  </div>
  <div id="box_3" onclick="hide(this)">
    <h4 class="never">Never miss a play</h4>
    <button onclick="hide(Element)" class="disappear" type="checkbox">Subscribe</button>
  </div>
</div>
<div class="box_4">
  <h3 class="box4_headline"><img src="assets\live symbol.jpg" class="live_symbol">&nbsp &nbsp &nbsp Ninjas leading Pirates</h3>
  <ul class="b4_list1">
    <ul><img src="assets\sjc-ninjas.png" class="ninja_symbol"></ul>
    <ul class="SJ">San Jose</ul>
    <ul class="ninja1">Ninjas</ul>
    <ul class="tenw">(10 W - 3L)</ul>
    <button class="ninjascore">
                <span class="ninjascore1">319</span>
            </button>
  </ul>
  <p class="vs">VS</p>
  <ul class="b4_list2">
    <ul><img src="assets\ns-pirates.png" class="pirate_symbol"></ul>
    <ul class="NS">Nova Scotia</ul>
    <ul class="pirate1">Pirates</ul>
    <ul class="twelvew">(12 W - 2 L)</ul>
    <button class="piratecore" onclick="">
                <span class="piratescore1">159</span>
            </button>
  </ul>
  <p class="gameinfo">A conservative match between two top-performing sides in the Central League Division with a Number 1 seed at stake...</p>
  <p class="readmore">Get more live updates...</p>
</div>

我希望它看起来像这样

但相反，我得到了这个

我怎样才能将大盒子移到顶部并使里面的东西正确对齐？我想知道我做错了什么。

标签： htmlcss

html - 我需要帮助正确对齐我的一个 HTML 框

问题描述

解决方案

推荐阅读