简体   繁体   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。

I need the text to overflow on the X axis just to reproduce some issue that I'm having on a bigger project.我需要文本在 X 轴上溢出只是为了重现我在更大项目中遇到的一些问题。 I leave a simple snippet, so you can tell me where I'm doing it wrong.我留下一个简单的片段,所以你可以告诉我我在哪里做错了。 Thanks!谢谢!

 .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 个回复

If you want the p tag to overflow on the x-axis, you simply need to tell it not to wrap using the white-space property:如果您希望p标签在 x 轴上溢出,您只需要使用white-space属性告诉它不要换行:

p{ 
    white-space: nowrap;
}
1 即使我将宽度分配给,文本也会溢出<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> - Overflowing text even though I assign width to <div> [duplicate]

这个问题在这里已经有了答案: 用 CSS 打破长字6 个答案 8 小时前关闭。 在示例代码中 - 我给了框 3和框 4的宽度为200px我实际上并不关心使用这些宽度,但我给了它们颜色,以便您可以更好地直观地看到我的问题。 问题是我的文本没有被父&lt;div&gt;包含在框 3 中具有设置(硬编码 ...

2 即使我设置了 display: inline-block,按钮的宽度也不等于它的子元素。 子元素的填充可能会影响这一点 - The width of the button is not equal to its child element even though I set display: inline-block. The padding of the child element might affect this

我想根据其子元素(即标签)设置按钮宽度。 但是,按钮只考虑孩子的纯内容宽度,而忽略了孩子的填充。 我尝试将按钮的宽度设置为 fit-content、max-content、auto 等,但没有成功。 我怎样才能解决这个问题? CSS *, *::before, *::after { box-siz ...

2021-12-13 03:18:21 2 22   html/ css
3 即使我已包含meta标签,也未设置“移动视口” - 'Mobile viewport not set' even though I have included the meta tag

我正在尝试构建一个响应式Rails应用程序。 当我浏览器出现故障(手动调整浏览器)时,该应用程序似乎响应良好。 但是,当我从浏览器控制台查看该应用程序时,它没有响应。 当我运行Google的“移动设备友好性”测试时,即使我在application.html.erb中包含以下元标记,它也 ...

4 即使我将3个容器div的宽度设置为100%,网站也无法正常显示 - Website not displaying properly even though I have 3 container div's with width set to 100%

我不确定这里的问题是什么,但它使我感到沮丧。 我有一个用于徽标和链接的标头div,一个用于主要部分的包装div,然后是一个页脚。 宽度全部设置为100%,但是由于某种原因,右侧和底部溢出了空白。 这样做很有趣,如果我将鼠标移至页脚下方的空白处,则会选择页眉中的联系人链接! 他们有相当 ...

2014-03-17 02:29:52 1 64   css/ html
6 为什么即使我在单独的线程中,Process.WaitForExit也会阻止? - Why does Process.WaitForExit block even though I have it in a separate thread?

C#3.5 Winforms应用程序。 我有一个计时器,该计时器在单独的线程上每30秒触发一次(它所做的只是向VS输出窗口写入文本字符串)。 我也有另一个线程,如果它启动,它会等待某个进程结束。 例如winword.exe。 在那个线程中,我有以下代码: 它将坐在那里 ...

7 即使我将刻度间隔设置为每7天,为什么我的d3图表的x轴将每个月的第一天都作为刻度显示? - Why does my d3 chart's x-axis include the first of every month as a tick even though I set the tick interval to every 7 days?

我是d3的新手,但是我已经使用d3.timeDay.every(7) x轴的刻度间隔设置为每7天一次。 但是,在创建图形时,我还会看到每个月的第一天添加了一个勾号。 例如,即使11/1不是在10/29之后的7天, 我的图形也会在10 / 1、10 / 8、10 / 15、10 / 22、10 ...

8 为什么 pow(x,1/p) 和 pow(x,1.0/p) 不相等,即使打印它们的值会给出相同的结果 - Why are pow(x,1/p) and pow(x,1.0/p) not equal even though printing their values gives the same result

问题是: 给你 2 个数字(N,M); 任务是找到 N√M(M 的第 N 个根)。 输入: 输入的第一行包含一个 integer T 表示测试用例的数量。 然后是 T 测试用例。 每个测试用例包含两个空格分隔的整数 N 和 M。 Output: 对于每个测试用例,如果根是 integer,则在新行 ...

暂无
暂无

声明:本站的技术帖子网页,遵循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> - Overflowing text even though I assign width to <div> [duplicate] 即使我设置了 display: inline-block,按钮的宽度也不等于它的子元素。 子元素的填充可能会影响这一点 - The width of the button is not equal to its child element even though I set display: inline-block. The padding of the child element might affect this 即使我已包含meta标签,也未设置“移动视口” - 'Mobile viewport not set' even though I have included the meta tag 即使我将3个容器div的宽度设置为100%,网站也无法正常显示 - Website not displaying properly even though I have 3 container div's with width set to 100% 为什么即使我有内联块,在重新调整大小时div元素也会分开? - Why div element will separate when re sizing even though I have inline-block? 为什么即使我在单独的线程中,Process.WaitForExit也会阻止? - Why does Process.WaitForExit block even though I have it in a separate thread? 即使我将刻度间隔设置为每7天,为什么我的d3图表的x轴将每个月的第一天都作为刻度显示? - Why does my d3 chart's x-axis include the first of every month as a tick even though I set the tick interval to every 7 days? 为什么 pow(x,1/p) 和 pow(x,1.0/p) 不相等,即使打印它们的值会给出相同的结果 - Why are pow(x,1/p) and pow(x,1.0/p) not equal even though printing their values gives the same result 加载页面时会出现一个文本框,即使我已将其“样式:显示”设置为无 - A text box appears when I load the page even though I have set its “style:display” to none 为什么链接不填充li元素即使display:block? - Why link not filling li element even though display:block?
 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM