css 相关问题

CSS(层叠样式表)是一种表示样式表语言,用于描述HTML(超文本标记语言),XML(可扩展标记语言)文档和SVG元素的外观和格式,包括(但不限于)颜色,布局,字体和动画。它还描述了元素应如何在屏幕上,纸上,语音或其他媒体上呈现。

如何使响应式标题内联?

这是我第一次制作 HTML/CSS 网站,所以请耐心等待,我还有很多东西要学。我正在尝试制作 TMZ 或美国周刊类型的新闻文章网站,但我似乎无法理解...

回答 1 投票 0

使用transformY缩放将元素移动到错误的方向

我尝试为我的 svg 中的小气泡制作动画。但是,当应用比例时,它看起来像是应用于气泡之间的距离,而不仅仅是气泡。它使气泡移动到

回答 1 投票 0

具有相同列跨度的两个不同表

我正在尝试对齐两个不同表的列,这些表包含相同的信息模型,但不是相同的项目。 这导致两个表的列大小不同,这使得

回答 1 投票 0

有没有办法删除页面导航链接上的背景颜色而不将其从幻灯片小部件中删除?

我附上了一张屏幕截图,可以更好地解释我想要实现的目标。我无法弄清楚如何删除网站页面导航中显示的背景颜色...

回答 1 投票 0

如何在 Angular 12 中创建带有子列的表格

在此输入图像描述 我正在尝试在 Angular 12 中创建一个带有子列的表。我已经添加了我实际想要创建的图像。 我正在尝试使用 sub

回答 1 投票 0

我正在尝试做CSS Flex方向

我在CSS编码中遇到了一个大问题。 请检查我的代码。 .wrap {显示:flex;} .column {显示:flex;flex-direction:row-reverse!重要} <style> <div class="w...</desc> <question vote="0"> <p>我在CSS编码中面临一个大问题。 请检查我的代码。</p> <pre><code>&lt;style&gt; .wrap {display:flex;} .column {display:flex;flex-direction:row-reverse !important} &lt;style&gt; </code></pre> <pre><code>&lt;div class=&#34;wrap&#34;&gt; &lt;div class=&#34;column&#34;&gt; &lt;div class=&#34;left&#34;&gt;Blue Background&lt;/div&gt; &lt;div class=&#34;right&#34;&gt;Red Background&lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;column&#34;&gt; &lt;div class=&#34;left&#34;&gt;Red Background&lt;/div&gt; &lt;div class=&#34;right&#34;&gt;Blue Background&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> </question> <answer tick="false" vote="0"> <p>我认为你还没有关闭标签</p> <pre><code>&lt;style&gt; .wrap {display:flex;} .column {display:flex;flex-direction:row-reverse !important} &lt;/style&gt; </code></pre> </answer> </body></html>

css
回答 0 投票 0

从 Web 组件监听事件不起作用

我试图让我的Web组件也通过事件与外部通信。到目前为止,发出事件似乎没问题,但由于某种原因无法接收事件。 我已经尝试过很多变体...

回答 1 投票 0

在CSS中自定义标签下划线

我有一个div,里面有一个标题,我想在标题下划线,使下划线覆盖div的大约80%,两侧缩进10%。另外,我希望下划线是...

回答 3 投票 0

根据元素的内容设置元素的高度

我正在尝试设置 div 的高度,以便它可以向下滚动并完全隐藏在顶部。因此元素的高度必须类似于 calc(parent_padding_top + max-content +

回答 1 投票 0

为什么我的内联块后面有空格? [重复]

我使用浮动样式来删除空格,我想将其居中,但在我的 div#bar 之后出现另一个空格 这是我的html: &... 我正在使用浮动样式来删除空格,并且我想将其居中,但在我的div#bar之后出现了另一个空格 这是我的html: <div id="foo"> <div id="bar"> <div class="divo divo1">test1</div> <div class="divo divo2">test2</div> <div class="divo divo3">test3</div> <div class="divo divo4">test4</div> </div> </div> 和CSS: #foo { width: 100%; background: #999; text-align: center; } #bar { display: inline-block; } .divo { display: block; float: left; } http://jsfiddle.net/Kodam/ay3ywtqa/ 注意:我不想使用负边距或字体大小 0 样式。 由于 #bar 是内联元素,因此它为下行文本元素(例如 j、y、g)保留了空间。您可以向左浮动,但这会折叠它,所以我建议将垂直对齐设置为顶部: #bar { display: inline-block; vertical-align:top; } jsFiddle 示例 试试这个: #foo { width: 100%; background: #999; font-size:0; text-align: center; } #bar { display: inline-block; font-size:13px; } 将父级字体大小设置为0,然后将所需的字体大小设置给子级。 jsFiddle:http://jsfiddle.net/ay3ywtqa/3/

回答 2 投票 0

Tailwind的config中,给主题添加属性VS theme.extend有什么区别?

Tailwind 的配置文档多次使用了扩展属性,但没有阐明主题属性与 theme.extend 属性进行自定义的区别...

回答 1 投票 0

渐变移动背景

我正在尝试在我正在创建的 WordPress 网站中重新创建该网站的背景。我认为这带有很多动画,但不太确定。我可以重新创建渐变过渡,如图所示...

回答 1 投票 0

Div 类的样式不像 css [关闭]

我的CSS 。标题 { 字体大小:20pt; 字体粗细:700; } 我的网页 一些话 但是“Some word”的样式不会像我在css中放入的那样(大小20pt,粗细700)......

回答 1 投票 0

Bootstrap 仅滚动一个 div 并将其他内容保留在顶部

有点像Facebook。我有 4 列,我希望滚动只适用于其中一列的内容。 我读过,我应该将 body 的高度设置为 100%,然后修复 t 的高度...

回答 2 投票 0

如何根据内容设置div高度

我需要在几行中显示一组文本符号,每行都在不同的 div 元素中。当我尝试这个时,我发现 div 的高度大于文本的高度。我准备了例子 展示...

回答 1 投票 0

在文本输入字段中输入时,打印在div中输入的内容

我有一个网站,其中有一个空框和一个输入文本框。 我希望能够在该输入框中输入一些内容并将其打印在空框中。 超文本标记语言 我有一个网站,其中有一个空框和一个输入文本框。 我希望能够在该输入框中输入一些内容并将其打印在空框中。 HTML <div class='printchatbox'></div> 这是空盒子并且 <input type='text' name='fname' class='chatinput'> 这是输入框。 CSS .printchatbox {border-width:thick 10px;border-style: solid; background-color:#fff; line-height: 2;color:#6E6A6B;font-size: 14pt;text-align:left;float: middle; border: 3px solid #969293;width:40%;} 如果有人能告诉我如何做到这一点,我将不胜感激。 谢谢 您使用 onkeyup 事件 使用 ids 进行搜索要容易得多。将 id 添加到您的元素,如下所示: <div class='printchatbox' id='printchatbox'></div> <input type='text' name='fname' class='chatinput' id='chatinput'> JS const inputBox = document.getElementById('chatinput'); const printBox = document.getElementById('printchatbox'); inputBox.addEventListener('keyup', function (event) { printBox.innerHTML = inputBox.value; }) 这是一个实例 http://jsfiddle.net/3kpay/ <div class='printchatbox' id='printchatbox'></div> <input type='text' name='fname' class='chatinput' onkeyUp="document.getElementById('printchatbox').innerHTML = this.value" /> 有很多方法可以完成此任务,最简单的可能是使用 jQuery。在下面的示例中,我使用 jQuery keyUp() 函数来监听键盘事件,然后将更新后的值写入 .printChatBox <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> </head> <body> <div class='printchatbox'>CHANGE ME</div> <input type='text' name='fname' class='chatinput'> <script type="script/javascript"> $('.chatinput').keyup(function(event) { newText = event.target.value; $('.printchatbox').text(newText); }); </script> </body> </html> 我在这里发布了一个工作示例:http://jsbin.com/axibuw/1/edit 在您的 HTML 中, <div id='printchatbox'></div> <br> <input type='text' id='fname' class='chatinput' onkeyup="annotate()"> 在 JS 中, function annotate(){ var typed= document.getElementById("fname").value; document.getElementById("printchatbox").innerHTML= typed; } 点击此处查看现场演示 Angular JS 只需两行代码即可完成此操作: 只需像导入其他库一样导入 Angular JS 即可: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"> 然后,在您的第一个 div(您从中复制的位置)上: <input type="text" ng-model="myID"> </input> 然后,在您要显示内容的地方:只需写: <div> {{myID}}</div> 这是我找到的最好的解决方案!

回答 5 投票 0

CSS 网格布局中每列之间的边框

我正在尝试在 CSS 网格布局中的每列之间添加边框。但是,在我的包装器 div 内,我所拥有的 div 不包含相同的内容,因此当我尝试设置 border-top 时...

回答 2 投票 0

CSS 类制作带圆圈数字的有序列表

我正在使用 Pandoc Markdown,它允许 Makrdown 嵌套在 HTML 标签内。我想要获得带有圆圈数字的有序列表,如下所示: 我正在使用 Pandoc Markdown,它允许 Makrdown 嵌套在 HTML 标签内。我想要获得带有圆圈数字的有序列表,如下所示: <ol> <li style="list-style-type: '❶ '"> First item </li> <li style="list-style-type: '❷ '"> Second item </li> </ol> 但我想用 markdown 编写它们,并用 CSS 类来处理其余的: <div class="circled-numbers"> 1. First item 2. Second item </div> 最多只支持 9 个项目就可以了。 这需要在 Safari 中工作。 可访问性很重要。 需要自定义圆圈数字字体,且不影响列表项的字体。 我得到了以下工作。 .circled-numbers ol { list-style-type: none; padding-left: 0; } .circled-numbers ol li { position: relative; } .circled-numbers ol li:nth-child(1)::before { content: '❶'; padding-right: 0.5em; font-family: monospace; } .circled-numbers ol li:nth-child(2)::before { content: '❷'; padding-right: 0.5em; font-family: monospace; } .circled-numbers ol li:nth-child(3)::before { content: '❸'; padding-right: 0.5em; font-family: monospace; }

回答 1 投票 0

如何在 CSS 网格布局中指定行高?

我有一个 CSS 网格布局,我想让一些(中间 3 行)拉伸到最大尺寸。我可能正在寻找类似于 flex-grow: 1 对 Flexbox 的作用的属性,但我不能...

回答 4 投票 0

下拉菜单的 dropright 变体在 ng-bootstrap 中不起作用

我正在尝试将 dropright 变体集成到引导下拉列表中。我可以在引导文档中看到它 https://getbootstrap.com/docs/4.3/components/dropdowns/#dropright 他们已经给出了代码 &...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.