我需要幫助正確對齊我的一個 HTML 框
[英]I need help aligning one of my HTML boxes properly
問題描述
我需要有關 HTML 和 CSS 代碼的幫助。 我需要幫助將大盒子向右對齊。 我嘗試在另一篇文章中提出這個問題，但最終我在其中提出了太多問題。 我是新手。 但無論如何我需要幫助。
我正在嘗試獲取我的 HTML：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dojo Sports News Letter</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">×</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">  DSNN  </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">      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> <script src="script.js"></script> </body> </html>
和CSS代碼：
* { 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; }
如何將大盒子移到頂部並使里面的東西正確對齊？ 我想知道我做錯了什么。
2 個解決方案
解決方案1
0 2021-10-16 17:14:50
看看這個例子https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_images_side_by_side
基本上你需要做一行，每個圖像應該是該行的一列。
解決方案2
0 2021-10-16 18:08:18
你需要有一個里面有兩列的容器。 然后在每一列內你可以放置其他東西。 設置容器display: flex; . 這是一個示例。
* { box-sizing: border-box; } .container { display: flex; } .left-column { flex-grow: 1; } .right-column { flex-grow: 3; } .cell { border: 1px solid black; padding: 1rem; margin: 1rem; }
<div class="container"> <div class="left-column"> <div class="cell">Box 1</div> <div class="cell">Box 2</div> <div class="cell">Box 3</div> </div> <div class="right-column"> <div class="cell"> <h3>Heading</h3> <p>Paragraph</p> </div> </div> </div>
我需要有關對齊文本框的幫助
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.