程序设计 css

14

如何仅在CSS中完成上标？我有一个样式表，在其中用上标字符标记了外部链接，但是我很难使字符正确对齐。我目前所拥有的看起来像这样： a.external:after { font-size: 50%; vertical-align: top; content: "+"; } 但这不起作用。自然，<sup>只有在content允许HTML的情况下，我才会使用-tag 。

320 css

11

媒体查询可以基于div元素而不是屏幕来调整大小吗？

我想使用媒体查询根据div其所在元素的大小来调整元素的大小。我不能使用屏幕大小，因为div就像网页中的小部件一样使用，它的大小可以变化。更新资料看来现在正在对此进行处理：https : //github.com/ResponsiveImagesCG/cq-demos

317 css media-queries

23

CSS3的border-radius属性和border-collapse：collapse不能混合使用。如何使用边框半径创建带有圆角的折叠表格？

编辑-原标题：是否有其他方式来实现border-collapse:collapse的CSS（为了有倒塌，圆角表）？事实证明，仅使表格的边框折叠起来并不能解决根本问题，因此我更新了标题以更好地反映讨论内容。我正在尝试使用该CSS3 border-radius属性制作带有圆角的表。我正在使用的表格样式如下所示： table { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px } 这是问题所在。我也想设置该border-collapse:collapse属性，并且在设置该属性时border-radius不再起作用。有没有一种基于CSS的方式可以获得与border-collapse:collapse不实际使用相同的效果？编辑：我在此处做了一个简单的页面来演示问题（仅Firefox / Safari）。看来问题的很大一部分是将表设置为具有圆角不会影响Corner td元素的角。如果桌子全是一种颜色，那将不是问题，因为我可以td分别使第一行和最后一行的上角和下角变圆。但是，我在表中使用了不同的背景色来区分标题和条纹，因此内部td元素也将显示其圆角。拟议解决方案摘要：用另一个带有圆角的元素包围桌子是行不通的，因为桌子的四角“渗出了”。将边框宽度指定为0不会折叠表格。底部td四角设置CELLSPACING零后仍然广场。相反，使用JavaScript可以避免此问题。可能的解决方案：这些表是用PHP生成的，因此我可以将一个不同的类应用于每个外部th / tds并分别设置每个角的样式。我不想这样做，因为它不是很优雅，并且要应用于多张桌子有点痛苦，所以请继续提出建议。可能的解决方案2是使用JavaScript（特别是jQuery）对角进行样式设置。此解决方案也可以使用，但仍然不是我想要的（我知道我很挑剔）。我有两个保留意见：这是一个非常轻量级的网站，我希望将JavaScript保持在最低水平使用边界半径对我来说具有吸引力的一部分是优美的退化和渐进的增强。通过对所有圆角使用border-radius，我希望在支持CSS3的浏览器中拥有一个一致的圆形站点，并在其他浏览器中拥有一个一致的正方形站点（我在看着您，IE）。我知道今天尝试使用CSS3似乎没有必要，但是我有自己的理由。我还要指出的是，此问题是w3c规范的结果，而不是CSS3的支持不佳，因此，当CSS3得到更广泛的支持时，任何解决方案都仍然是相关且有用的。

317 html css rounded-corners html-table

10

如何“禁用”移动网页的缩放？

我正在创建一个移动网页，基本上是一个大型表单，带有多个文本输入。但是（至少在我的Android手机上），每次我单击某些输入时，整个页面都会在此处放大，从而遮盖了页面的其余部分。是否有一些HTML或CSS命令来禁用这种在网页上缩放的功能？

316 html css mobile

8

我可以使用CSS获得多张背景图片吗？

是否可以有两个背景图像？例如，我想在顶部重复一幅图像（repeat-x），在整个页面中重复另一幅图像（repeat），其中整个页面中的一幅图像位于顶部重复的一幅图像的后面。我发现我可以通过设置html和body的背景来获得两个背景图像的预期效果： html { background: url(images/bg.png); } body { background: url(images/bgtop.png) repeat-x; } 这是“好” CSS吗？有没有更好的方法？如果我要三个或更多背景图像怎么办？

316 css background-image

10

Div宽度100％减去固定像素数

在不使用表或JavaScript的情况下如何实现以下结构？白色边框代表div的边缘，与问题无关。中间区域的大小将有所变化，但将具有精确的像素值，并且整个结构应根据这些值缩放。为了简化它，我需要一种方法来将“ 100％-n px”宽度设置为顶部-中间和底部-中间div。我希望能使用一个干净的跨浏览器解决方案，但如果不可能，CSS hacks会做。这是奖金。我一直在努力并最终使用表或JavaScript的另一种结构。稍有不同，但是引入了新的问题。我主要在基于jQuery的窗口系统中使用它，但是我想使布局不在脚本中，而仅控制一个元素（中间一个）的大小。

316 html css height width

15

如何使用Javascript加载CSS文件？

是否可以使用Javascript将CSS样式表导入html页面？如果是这样，怎么办？附言：JavaScript将会托管在我的网站上，但我希望用户能够放入<head>其网站的标签，并且它应该能够将托管在我的服务器上的CSS文件导入当前网页。（css文件和javascript文件都将托管在我的服务器上）。

316 javascript html css dhtml

6

是否有仅第一个直接子代的CSS选择器？

我有以下HTML <div class="section"> <div>header</div> <div> contents <div>sub contents 1</div> <div>sub contents 2</div> </div> </div> 以及以下样式： DIV.section DIV:first-child { ... } 由于某种原因，我不了解该样式已应用于“子内容1” <div>和“标题” <div>。我认为样式上的选择器仅适用于div的第一个直接子类，该子类带有“ section”类。如何更改选择器以获取所需的内容？

315 html css css-selectors

3

如何在中心有两个固定宽度的列和一个柔性列？

我正在尝试建立一个具有三列的flexbox布局，其中左列和右列具有固定的宽度，而中间列可以弯曲以填充可用空间。尽管设置了列的尺寸，但它们似乎仍会随着窗口缩小而缩小。有人知道如何做到这一点吗？我需要做的另一件事是基于用户交互隐藏右列，在这种情况下，左列仍将保持其固定宽度，而中间列将填充其余空间。 #container { display: flex; justify-content: space-around; align-items: stretch; max-width: 1200px; } .column.left { width: 230px; } .column.right { width: 230px; border-left: 1px solid #eee; } .column.center { border-left: 1px solid #eee; } <div id="container"> <div class="column left"> <p>Anxiety was a blog series that ran in the …

315 html css flexbox

8

Firefox的自定义CSS滚动条

我想用CSS自定义滚动条。我使用此WebKit CSS代码，该代码非常适合Safari和Chrome： ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece { background-color: #C2D2E4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0A4C95; } 如何在Firefox中执行相同的操作？我知道我可以使用jQuery轻松地做到这一点，但是如果可行，我宁愿使用纯CSS做到这一点。将不胜感激某人的专家意见！

313 css firefox webkit scrollbar

1

为什么弹性项目不能缩小到超过内容大小？

我有4个flexbox列，并且一切正常，但是当我向列中添加一些文本并将其设置为大字体时，由于flex属性，它使列变宽了。我尝试使用word-break: break-word它并对其有所帮助，但是当我将列的大小调整为非常小的宽度时，文本中的字母会分成多行（每行一个字母），但是该列的宽度不会小于一个字母的大小。观看此视频（开始时，第一列是最小的，但是当我调整窗口大小时，它是最宽的列。我只想始终遵循flex设置； flex大小为1：3：4：4）我知道，将字体大小和列填充设置为较小会有所帮助...但是还有其他解决方案吗？我不能使用overflow-x: hidden。 JSFiddle .container { display: flex; width: 100% } .col { min-height: 200px; padding: 30px; word-break: break-word } .col1 { flex: 1; background: orange; font-size: 80px } .col2 { flex: 3; background: yellow } .col3 { flex: 4; background: skyblue } .col4 …

312 html css flexbox

15

如何删除锚点（链接）的下划线？

无论如何（在CSS中）是否要避免在页面..中引入文本和链接的下划线？

312 html css underline

21

自动调整动态文本大小以填充固定大小的容器

我需要将用户输入的文本显示为固定大小的div。我想要的是自动调整字体大小，以使文本尽可能多地填充框中。所以-如果div为400px x 300px。如果有人输入ABC，那么它确实是大字体。如果他们输入一个段落，那么它将是很小的字体。我可能想从最大字体大小开始-也许是32px，并且当文本太大而无法容纳容器时，请缩小字体大小直到适合为止。

312 jquery html css

10

使用普通JavaScript获取div高度

Наэтотвопросень 堆栈溢出нарусском：УзнатьвысотуэлементачерезJavascript，关于如何在不使用jQuery的情况下获得div高度的任何想法？我正在寻找Stack Overflow这个问题，似乎每个答案都指向jQuery的.height()。我尝试了类似的方法myDiv.style.height，但是即使我的div具有CSS width并height在CSS中进行了设置，它也没有返回任何内容。

312 javascript html css

9

如何更改<hr>标签的厚度

我想<hr>在CSS中更改水平线（）的厚度。我知道可以像这样用HTML完成- <hr size="10"> 但是我听说这里已弃用了MDN。在CSS中，我尝试使用，height:1px但它不会改变厚度。我想把<hr>线0.5px弄粗。我在Ubuntu上使用Firefox 3.6.11

311 html css user-interface

Questions tagged «css»