簡體   English   中英

為什么這個 tetx 沒有在 x 軸上溢出,即使我有一個固定的寬度和

我需要文本在 X 軸上溢出只是為了重現我在更大項目中遇到的一些問題。 我留下一個簡單的片段,所以你可以告訴我我在哪里做錯了。 謝謝!

 .article { background-color: rgb(236, 161, 161); width: 20em; }.article p { display: block; }
 <article class="article"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis deleniti iure quidem distinctio officia voluptates similique molestiae culpa? Perferendis, velit maiores nobis maxime aut facere eaque quis voluptas accusamus commodi.</p> </article>

why is this tetx not overflowing on the x axis even though I have a fixed width and the

提示:本站收集StackOverFlow近2千萬問答,支持中英文搜索,鼠標放在語句上彈窗顯示對應的參考中文或英文, 本站還提供   中文簡體   英文版本   中英對照 版本,有任何建議請聯系yoyou2525@163.com。

我需要文本在 X 軸上溢出只是為了重現我在更大項目中遇到的一些問題。 我留下一個簡單的片段,所以你可以告訴我我在哪里做錯了。 謝謝!

 .article { background-color: rgb(236, 161, 161); width: 20em; }.article p { display: block; }
 <article class="article"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis deleniti iure quidem distinctio officia voluptates similique molestiae culpa? Perferendis, velit maiores nobis maxime aut facere eaque quis voluptas accusamus commodi.</p> </article>

1 個回復

如果您希望p標簽在 x 軸上溢出,您只需要使用white-space屬性告訴它不要換行:

p{ 
    white-space: nowrap;
}
1 即使我將寬度分配給,文本也會溢出
[復制]

在示例代碼中 - 我給了框 3框 4的寬度為200px我實際上並不關心使用這些寬度,但我給了它們顏色,以便您可以更好地直觀地看到我的問題。

問題是我的文本沒有被父<div>包含在框 3 中具有設置(硬編碼)像素寬度,特別是它在 1 行中向右運行,而不是包裹在<div>內。 對於框 4 ,我可以理解它試圖延伸到最后,但如果它不再是它,它就會再次跑出網格之外。 所以我缺少一些東西來幫助包裝內容。 我該如何解決這個問題?

 * { margin:0; padding:0; } html { box-sizing: border-box; font-size: 30px; font-family: 'Bitter', serif; } body{ background: rgb(7, 7, 7); color: #fff; }.imgContainer{ width: 100%; height: fit-content; background-color: black; pointer-events: none; user-select: none; }.mySlides { opacity: 0.5; overflow: hidden; background-position: center; width: 100%; height: 650px; max-height: 75vh; pointer-events: none; user-select: none; }.bodyC { padding-top: 75px; max-width: 360px; font-weight: 200; font-size: 0.8rem; }.bodyC2 { padding-left: 180px; padding-top: 250px; max-width: 450px; font-weight: 200; font-size: 0.8rem; }.bodyContainer { display: flex; width: 100%; padding-right: 80px; padding-bottom: 80px; justify-content: center; min-height: 50vh; } h3 { font-size: 36px; margin-bottom:10px; font-weight: 700; } h4 { text-transform: uppercase; font-weight: 700; font-size: 27px; margin-bottom:10px; }.logobutton { padding-right: 45px; user-select: none; }.homenugget{ height:70px; width:50px; position:fixed; top: 5px; left: 32px; opacity:0; user-select: none; }.smallu { height: 50px; width:50px; user-select: none; }.container { margin: 0 auto; display:flex; align-items: center; justify-content: space-between; } nav { position:relative; top: 0; left: 0; right: 0; z-index: 99; background-color: #212121; padding: 16px 32px; border-bottom: 3px solid rgb(37, 164, 173); } h1 { color: #ffffff; font-size: 28px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }.hamburger { display: block; position: relative; z-index: 1; user-select: none; appearance: none; border: none; outline: none; background: none; cursor: pointer; }.hamburger span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background-color: #eeeeee; border-radius: 6px; z-index: 1; transform-origin: 0 0; transition: 0.4s; }.hamburger:hover span:nth-child(2) { transform: translateX(10px); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(1) { transform: translate(0px, -2px) rotate(45deg); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(2) { opacity: 0; transform: translateX(15px); }.hamburger.is-active span:nth-child(3) { transform: translate(-3px, 3px) rotate(-45deg); background-color:rgb(37, 164, 173); }.hamburger.is-active:hover span { background-color: rgb(75, 243, 255); filter: blur(0.5px); box-shadow: 1px -1px rgb(75, 243, 255); }.menu { display:none; flex: 1 1 0%; justify-content: center; margin: 0 -16; letter-spacing: 2px; }.menu a{ color: ivory; margin: 0 16; font-weight: 700; text-decoration: none; transition: 0.4s; padding: 5px 16px; border-radius: 50px; }.menu a.is-active, .menu a:hover{ background-color: rgba(88, 223, 233, 0.295); color: rgb(75, 243, 255); }.dropdown { position: relative; }.dropdownMenu { position: absolute; width: 300px; z-index: 100; right: -60px; top: calc(100% + 32px); border-top: 1px solid rgb(75, 243, 255); border-bottom: 3px solid rgb(75, 243, 255); border-left: 3px solid rgb(55, 225, 240); background-color: #212121; border-radius: 0 0 15px 15px; opacity: 0; }.link{ display: block; text-align: left; margin: 10px; font-size: 30px; color: ivory; text-decoration: none; opacity: 1; }.dropdownMenu a:hover { background-color: rgba(88, 223, 233, 0.295); border-radius: 5px; color: rgb(75, 243, 255); text-decoration: none; opacity: 1; }.wth{ padding-bottom: 1000px; }.footer { position: relative; width: 100%; bottom: 0; text-align: left; background-color: #212121; padding:50px 0 50px 0; }.footer-container { margin-left: 1em; }.footer h5 { color: #fff; }.footer h5 { margin-bottom: 20px; }.footer p { color: rgba(255, 255, 255, 0.25); font-size:16px; line-height:22px; }.hearted { color:red; font-size: 12px; }.opacityStyle{ opacity: 1; }.subscribe { width: 100%; background-color: rgb(92, 89, 89); background-image: url('../images/backgrounds/parallax-bg.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; }.subscribe >.sub-container { padding-top: 80px; padding-bottom: 80px; }.subscribe-title h2 { font-weight: 600; font-size: 23px; color: #fff; letter-spacing:3px; margin:0 3%; line-height:70px; text-transform:uppercase; }.subscribe-form { margin-top: 6px; }.subscribe-form input[type=text] { width: 65%; height: 60px; display: block; padding: 0 20px; background-color: #fff; border: 1px solid #fff; border-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; line-height: 60px; letter-spacing:1px; font-size:15px; font-weight:300; float: left; }.subscribe-form input:focus { outline: 0; }.subscribe-form input[type=submit] { width: 35%; height: 62px; display: flex; position: absolute; right: 5px; justify-content: center; background-color: rgb(35, 142, 151); border: 1px solid rgb(35, 142, 151); color: #fff; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; font-weight: 700; font-size: 33px; transition: all 0.125s ease-in-out 0s; -moz-transition: all 0.125s ease-in-out 0s; -webkit-transition: all 0.125s ease-in-out 0s; -o-transition: all 0.125s ease-in-out 0s; -ms-transition: all 0.125s ease-in-out 0s; }.subscribe-form input[type=submit]:hover { background-color: rgb(23, 90, 95); border: 1px solid rgb(23, 90, 95); color:rgb(75, 243, 255); }.error_message { color:#fc6e51; padding-bottom:15px; font-size:13px; line-height:30px; } #success_page { color:#9ce726; padding-bottom:10px; font-size:12px; } #success_page h3 { font-size:17px; font-weight:400px; color:#4ab217; } #success_page p { font-size:12px; font-weight:400px; color:#b3b3b3; }.box1 { grid-column: 1/4; text-align: center; background: chartreuse; }.box2 { grid-column: 1 / 2; grid-row: 2/2; width:300px; height: 300px; background:blueviolet }.box3 { width: 200px; grid-column: 2/3; grid-row:2/3; background: blue; }.box4 { width: 200px; grid-column: 1/4; grid-row:4/4; background: #fc6e51; }.wrapper{ display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(1, 1fr); gap:10px; max-height: 55vh; background: #212121; }.megawrap{ display: grid; grid-auto-flow: column; height: 350px; width: 200px; gap: 20px; } @media (min-width: 1080px){.bodyC2{ max-width: 360px; padding-left: 150px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 200px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1175px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 50px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1400px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (min-width: 975px) {.hamburger{ display: none; }.dropdown { display: none; }.menu{ display:flex; }.bodyContainer{ flex-direction: row; }.bodyC2{ flex-direction: column; padding-top: 100px; } } @media (max-width: 975px){.bodyContainer{ flex-direction: column; }.bodyC2{ flex-direction: column; padding-top: 50px; font-size: .8em; margin-left: 150px; }.bodyC { font-size: .8em; margin-left: 50px; } }
 <,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>III</title> <link rel="stylesheet" href="main:css"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=Dosis;wght@200;300;400;500;600;700:800&family=Roboto+Mono,ital,wght@0;100,0;200,0;300,0;400,0;500,0;600,0;700,1;200,1;300,1;400,1;500,1;600,1.700&family=Rock+3D&display=swap" rel="stylesheet"> </head> <body> <nav> <div class="container"> <div class="logobutton"> <img class="smallu" src="images/ulogo-white.jpg"> <a class="homenugget" href="home.html"></a> </div> <h1>Ideas Imprint</h1> <div class="menu"> <a href="events.html">Events</a> <a href="about.html" class="is-active">About</a> <a href="login.html">Login</a> <a href="#">Dashboard</a> </div> <div class="dropdown"> <button class="hamburger"> <span> </span> <span></span> <span></span> </button> <div class="dropdownMenu"> <a href="events.html" class="link">Events</a> <a href="about.html" class="link">About</a> <a href="#" class="link">Login</a> <a href="#" class="link">Dashboard</a> </div> </div> </div> < /nav> <div class="megawrap"> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class= "box3"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <div class= "box4"> box4box4box4box4box4box4box4box4box4box4box4 </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class= "box3"> box3box3box3box3box3box3box3box3box3box3box3 </div> <div class= "box4"> box4box4box4box4box4box4box4box </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class= "box3"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <div class= "box4"> box4box4box4box4box4box4box4box4box </div> </div> </div> <div class="wth"></div> <.-- Footer section --> <footer class="footer"> <div class="footer-container"> <div class="footer-row"> <div class="Footer-text-left"> <p>Copyright © 2022 Ideas Imprint Inc: All Rights Reserved.</p> <p> Made with <span class="hearted"> ❤</span></p> </div> </div> </div> <.-- footer top --> </footer> <.-- Footer section --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="main.js"></script> </body> </html>

這個問題在這里已經有了答案: 用 CSS 打破長字6 個答案 8 小時前關閉。 在示例代碼中 - 我給了框 3和框 4的寬度為200px我實際上並不關心使用這些寬度,但我給了它們顏色,以便您可以更好地直觀地看到我的問題。 問題是我的文本沒有被父&lt;div&gt;包含在框 3 中具有設置(硬編碼 ...

3 即使我已包含meta標簽,也未設置“移動視口”

我正在嘗試構建一個響應式Rails應用程序。 當我瀏覽器出現故障(手動調整瀏覽器)時,該應用程序似乎響應良好。 但是,當我從瀏覽器控制台查看該應用程序時,它沒有響應。 當我運行Google的“移動設備友好性”測試時,即使我在application.html.erb中包含以下元標記,它也 ...

4 即使我將3個容器div的寬度設置為100%,網站也無法正常顯示

我不確定這里的問題是什么,但它使我感到沮喪。 我有一個用於徽標和鏈接的標頭div,一個用於主要部分的包裝div,然后是一個頁腳。 寬度全部設置為100%,但是由於某種原因,右側和底部溢出了空白。 這樣做很有趣,如果我將鼠標移至頁腳下方的空白處,則會選擇頁眉中的聯系人鏈接! 他們有相當 ...

2014-03-17 02:29:52 1 64   css/ html
7 即使我將刻度間隔設置為每7天,為什么我的d3圖表的x軸將每個月的第一天都作為刻度顯示?

我是d3的新手,但是我已經使用d3.timeDay.every(7) x軸的刻度間隔設置為每7天一次。 但是,在創建圖形時,我還會看到每個月的第一天添加了一個勾號。 例如,即使11/1不是在10/29之后的7天, 我的圖形也會在10 / 1、10 / 8、10 / 15、10 / 22、10 ...

10 為什么鏈接不填充li元素即使display:block?

我正在使用superfish菜單,我遇到了一個我無法弄清楚的問題,雖然我確定答案很明顯,但我只是錯過了... 基本上我的元素沒有擴展來填充它們包含的li元素,即使a元素設置為display:block 請看這里的例子: http://www.spiritlevel.co.uk/ ...

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 即使我將寬度分配給,文本也會溢出<div> [復制] </div><div id="text_translate"><div><aside class="s-notice s-notice__info post-notice js-post-notice mb16" role="status"><div class="d-flex fd-column fw-nowrap"><div class="d-flex fw-nowrap"><div class="flex--item wmn0 fl1 lh-lg"><div class="flex--item fl1 lh-lg"> 這個問題在這里已經有了答案:</div></div></div><div class="flex--item mb0 mt4"> <a href="/questions/18628038/break-long-word-with-css" dir="ltr" rel="nofollow noreferrer">用 CSS 打破長字</a><span class="question-originals-answer-count">6 個答案</span></div><div class="flex--item mb0 mt8"> <span title="2022-01-14 08:28:11Z" class="relativetime">8 小時前</span>關閉。</div></div></aside></div><p> 在示例代碼中 - 我給了<strong>框 3</strong>和<strong>框 4</strong>的寬度為200px我實際上並不關心使用這些寬度,但我給了它們顏色,以便您可以更好地直觀地看到我的問題。</p><p> 問題是我的文本沒有被父&lt;div&gt;包含在框 3 中具有設置(硬編碼)像素寬度,特別是它在 1 行中向右運行,而不是包裹在&lt;div&gt;內。 對於<strong>框 4</strong> ,我可以理解它試圖延伸到最后,但如果它不再是它,它就會再次跑出網格之外。 所以我缺少一些東西來幫助包裝內容。 我該如何解決這個問題? </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> * { margin:0; padding:0; } html { box-sizing: border-box; font-size: 30px; font-family: 'Bitter', serif; } body{ background: rgb(7, 7, 7); color: #fff; }.imgContainer{ width: 100%; height: fit-content; background-color: black; pointer-events: none; user-select: none; }.mySlides { opacity: 0.5; overflow: hidden; background-position: center; width: 100%; height: 650px; max-height: 75vh; pointer-events: none; user-select: none; }.bodyC { padding-top: 75px; max-width: 360px; font-weight: 200; font-size: 0.8rem; }.bodyC2 { padding-left: 180px; padding-top: 250px; max-width: 450px; font-weight: 200; font-size: 0.8rem; }.bodyContainer { display: flex; width: 100%; padding-right: 80px; padding-bottom: 80px; justify-content: center; min-height: 50vh; } h3 { font-size: 36px; margin-bottom:10px; font-weight: 700; } h4 { text-transform: uppercase; font-weight: 700; font-size: 27px; margin-bottom:10px; }.logobutton { padding-right: 45px; user-select: none; }.homenugget{ height:70px; width:50px; position:fixed; top: 5px; left: 32px; opacity:0; user-select: none; }.smallu { height: 50px; width:50px; user-select: none; }.container { margin: 0 auto; display:flex; align-items: center; justify-content: space-between; } nav { position:relative; top: 0; left: 0; right: 0; z-index: 99; background-color: #212121; padding: 16px 32px; border-bottom: 3px solid rgb(37, 164, 173); } h1 { color: #ffffff; font-size: 28px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }.hamburger { display: block; position: relative; z-index: 1; user-select: none; appearance: none; border: none; outline: none; background: none; cursor: pointer; }.hamburger span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background-color: #eeeeee; border-radius: 6px; z-index: 1; transform-origin: 0 0; transition: 0.4s; }.hamburger:hover span:nth-child(2) { transform: translateX(10px); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(1) { transform: translate(0px, -2px) rotate(45deg); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(2) { opacity: 0; transform: translateX(15px); }.hamburger.is-active span:nth-child(3) { transform: translate(-3px, 3px) rotate(-45deg); background-color:rgb(37, 164, 173); }.hamburger.is-active:hover span { background-color: rgb(75, 243, 255); filter: blur(0.5px); box-shadow: 1px -1px rgb(75, 243, 255); }.menu { display:none; flex: 1 1 0%; justify-content: center; margin: 0 -16; letter-spacing: 2px; }.menu a{ color: ivory; margin: 0 16; font-weight: 700; text-decoration: none; transition: 0.4s; padding: 5px 16px; border-radius: 50px; }.menu a.is-active, .menu a:hover{ background-color: rgba(88, 223, 233, 0.295); color: rgb(75, 243, 255); }.dropdown { position: relative; }.dropdownMenu { position: absolute; width: 300px; z-index: 100; right: -60px; top: calc(100% + 32px); border-top: 1px solid rgb(75, 243, 255); border-bottom: 3px solid rgb(75, 243, 255); border-left: 3px solid rgb(55, 225, 240); background-color: #212121; border-radius: 0 0 15px 15px; opacity: 0; }.link{ display: block; text-align: left; margin: 10px; font-size: 30px; color: ivory; text-decoration: none; opacity: 1; }.dropdownMenu a:hover { background-color: rgba(88, 223, 233, 0.295); border-radius: 5px; color: rgb(75, 243, 255); text-decoration: none; opacity: 1; }.wth{ padding-bottom: 1000px; }.footer { position: relative; width: 100%; bottom: 0; text-align: left; background-color: #212121; padding:50px 0 50px 0; }.footer-container { margin-left: 1em; }.footer h5 { color: #fff; }.footer h5 { margin-bottom: 20px; }.footer p { color: rgba(255, 255, 255, 0.25); font-size:16px; line-height:22px; }.hearted { color:red; font-size: 12px; }.opacityStyle{ opacity: 1; }.subscribe { width: 100%; background-color: rgb(92, 89, 89); background-image: url('../images/backgrounds/parallax-bg.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; }.subscribe &gt;.sub-container { padding-top: 80px; padding-bottom: 80px; }.subscribe-title h2 { font-weight: 600; font-size: 23px; color: #fff; letter-spacing:3px; margin:0 3%; line-height:70px; text-transform:uppercase; }.subscribe-form { margin-top: 6px; }.subscribe-form input[type=text] { width: 65%; height: 60px; display: block; padding: 0 20px; background-color: #fff; border: 1px solid #fff; border-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; line-height: 60px; letter-spacing:1px; font-size:15px; font-weight:300; float: left; }.subscribe-form input:focus { outline: 0; }.subscribe-form input[type=submit] { width: 35%; height: 62px; display: flex; position: absolute; right: 5px; justify-content: center; background-color: rgb(35, 142, 151); border: 1px solid rgb(35, 142, 151); color: #fff; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; font-weight: 700; font-size: 33px; transition: all 0.125s ease-in-out 0s; -moz-transition: all 0.125s ease-in-out 0s; -webkit-transition: all 0.125s ease-in-out 0s; -o-transition: all 0.125s ease-in-out 0s; -ms-transition: all 0.125s ease-in-out 0s; }.subscribe-form input[type=submit]:hover { background-color: rgb(23, 90, 95); border: 1px solid rgb(23, 90, 95); color:rgb(75, 243, 255); }.error_message { color:#fc6e51; padding-bottom:15px; font-size:13px; line-height:30px; } #success_page { color:#9ce726; padding-bottom:10px; font-size:12px; } #success_page h3 { font-size:17px; font-weight:400px; color:#4ab217; } #success_page p { font-size:12px; font-weight:400px; color:#b3b3b3; }.box1 { grid-column: 1/4; text-align: center; background: chartreuse; }.box2 { grid-column: 1 / 2; grid-row: 2/2; width:300px; height: 300px; background:blueviolet }.box3 { width: 200px; grid-column: 2/3; grid-row:2/3; background: blue; }.box4 { width: 200px; grid-column: 1/4; grid-row:4/4; background: #fc6e51; }.wrapper{ display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(1, 1fr); gap:10px; max-height: 55vh; background: #212121; }.megawrap{ display: grid; grid-auto-flow: column; height: 350px; width: 200px; gap: 20px; } @media (min-width: 1080px){.bodyC2{ max-width: 360px; padding-left: 150px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 200px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1175px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 50px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1400px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (min-width: 975px) {.hamburger{ display: none; }.dropdown { display: none; }.menu{ display:flex; }.bodyContainer{ flex-direction: row; }.bodyC2{ flex-direction: column; padding-top: 100px; } } @media (max-width: 975px){.bodyContainer{ flex-direction: column; }.bodyC2{ flex-direction: column; padding-top: 50px; font-size: .8em; margin-left: 150px; }.bodyC { font-size: .8em; margin-left: 50px; } }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;,DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name="viewport" content="width=device-width. initial-scale=1.0"&gt; &lt;title&gt;III&lt;/title&gt; &lt;link rel="stylesheet" href="main:css"&gt; &lt;link rel="preconnect" href="https.//fonts.googleapis:com"&gt; &lt;link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin&gt; &lt;link rel="preconnect" href="https.//fonts.googleapis:com"&gt; &lt;link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin&gt; &lt;link href="https.//fonts.googleapis?com/css2:family=Dosis;wght@200;300;400;500;600;700:800&amp;family=Roboto+Mono,ital,wght@0;100,0;200,0;300,0;400,0;500,0;600,0;700,1;200,1;300,1;400,1;500,1;600,1.700&amp;family=Rock+3D&amp;display=swap" rel="stylesheet"&gt; &lt;/head&gt; &lt;body&gt; &lt;nav&gt; &lt;div class="container"&gt; &lt;div class="logobutton"&gt; &lt;img class="smallu" src="images/ulogo-white.jpg"&gt; &lt;a class="homenugget" href="home.html"&gt;&lt;/a&gt; &lt;/div&gt; &lt;h1&gt;Ideas Imprint&lt;/h1&gt; &lt;div class="menu"&gt; &lt;a href="events.html"&gt;Events&lt;/a&gt; &lt;a href="about.html" class="is-active"&gt;About&lt;/a&gt; &lt;a href="login.html"&gt;Login&lt;/a&gt; &lt;a href="#"&gt;Dashboard&lt;/a&gt; &lt;/div&gt; &lt;div class="dropdown"&gt; &lt;button class="hamburger"&gt; &lt;span&gt; &lt;/span&gt; &lt;span&gt;&lt;/span&gt; &lt;span&gt;&lt;/span&gt; &lt;/button&gt; &lt;div class="dropdownMenu"&gt; &lt;a href="events.html" class="link"&gt;Events&lt;/a&gt; &lt;a href="about.html" class="link"&gt;About&lt;/a&gt; &lt;a href="#" class="link"&gt;Login&lt;/a&gt; &lt;a href="#" class="link"&gt;Dashboard&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt; /nav&gt; &lt;div class="megawrap"&gt; &lt;div class="wrapper"&gt; &lt;div class="box1"&gt;Hello I'm a Head&lt;/div&gt; &lt;img class="box2" src="images/7.jpg" alt=""&gt; &lt;div class= "box3"&gt; box3box3box3box3box3box3box3box3box3box3box3box3 &lt;/div&gt; &lt;div class= "box4"&gt; box4box4box4box4box4box4box4box4box4box4box4 &lt;/div&gt; &lt;/div&gt; &lt;div class="wrapper"&gt; &lt;div class="box1"&gt;Hello I'm a Head&lt;/div&gt; &lt;img class="box2" src="images/7.jpg" alt=""&gt; &lt;div class= "box3"&gt; box3box3box3box3box3box3box3box3box3box3box3 &lt;/div&gt; &lt;div class= "box4"&gt; box4box4box4box4box4box4box4box &lt;/div&gt; &lt;/div&gt; &lt;div class="wrapper"&gt; &lt;div class="box1"&gt;Hello I'm a Head&lt;/div&gt; &lt;img class="box2" src="images/7.jpg" alt=""&gt; &lt;div class= "box3"&gt; box3box3box3box3box3box3box3box3box3box3box3box3 &lt;/div&gt; &lt;div class= "box4"&gt; box4box4box4box4box4box4box4box4box &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="wth"&gt;&lt;/div&gt; &lt;.-- Footer section --&gt; &lt;footer class="footer"&gt; &lt;div class="footer-container"&gt; &lt;div class="footer-row"&gt; &lt;div class="Footer-text-left"&gt; &lt;p&gt;Copyright © 2022 Ideas Imprint Inc: All Rights Reserved.&lt;/p&gt; &lt;p&gt; Made with &lt;span class="hearted"&gt; ❤&lt;/span&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;.-- footer top --&gt; &lt;/footer&gt; &lt;.-- Footer section --&gt; &lt;script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="main.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre></div></div><p></p></div> 即使我設置了 display: inline-block,按鈕的寬度也不等於它的子元素。 子元素的填充可能會影響這一點 即使我已包含meta標簽,也未設置“移動視口” 即使我將3個容器div的寬度設置為100%,網站也無法正常顯示 為什么即使我有內聯塊,在重新調整大小時div元素也會分開? 為什么即使我在單獨的線程中,Process.WaitForExit也會阻止? 即使我將刻度間隔設置為每7天,為什么我的d3圖表的x軸將每個月的第一天都作為刻度顯示? 為什么 pow(x,1/p) 和 pow(x,1.0/p) 不相等,即使打印它們的值會給出相同的結果 加載頁面時會出現一個文本框,即使我已將其“樣式:顯示”設置為無 為什么鏈接不填充li元素即使display:block?
 
粵ICP備18138465號  © 2020-2022 STACKOOM.COM