Questions tagged «css»

我实际上有两个问题，但是让我先解决主要问题，因为我认为另一个更容易解决。 我在菜单左侧的滚动条的左侧有一个固定位置的div。右侧是可以正确滚动的标准div。问题是，当浏览器的视口太小而看不到整个菜单时，无法找到我可以找到的滚动方式（至少没有使用CSS）。我试过在CSS中使用不同的溢出，但是没有什么可以使div滚动。包含菜单的div设置为min-height：100％和position：fixed ..这两个属性我都需要保留。 包含菜单的div 位于另一个包装div中，该div绝对定位并且高度设置为100％。 如果内容对于div而言太高，如何使其垂直滚动？ 这导致了另一个问题，即我不希望显示滚动条。.但是我想我可能已经对此有了一个答案（只是它不起作用，因为我无法使div滚动。首先）。 有什么办法吗？也许需要JavaScript？（我对此一无所知） JS小提琴示例 以及引起该问题的相关代码（由于将整个内容发布在这里太长了）： .fixed-content { min-height:100%; position:fixed; overflow-y:scroll; overflow-x:hidden; } 还尝试添加height：100％只是为了看看是否是一个问题，但是它也不起作用...也没有固定的高度，例如600px。

150 javascript  css  scroll  overflow  css-position 

我有一个性别选择列表。 码： <select> <option>male</option> <option>female</option> <option>others</option> </select> 我想使用下拉列表中的图像作为drop-down-icon.jpeg。 我想添加一个按钮代替下拉图标。 怎么做？

150 html  css 

请考虑以下示例：（此处为现场演示） $(function() { console.log("width = " + $("td").width()); }); td { border: 1px solid black; width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr> <td>Hello Stack Overflow</td> </tr> </tbody> </table> 运行代码段Hide results展开摘要 输出为：width = 139，并且省略号不出现。 我在这里想念什么？

150 html  css  ellipsis 

我想样式如下： forms.py： from django import forms class ContactForm(forms.Form): subject = forms.CharField(max_length=100) email = forms.EmailField(required=False) message = forms.CharField(widget=forms.Textarea) contact_form.html： <form action="" method="post"> <table> {{ form.as_table }} </table> <input type="submit" value="Submit"> </form> 例如，如何设置一个类或ID为subject，email，message以提供外部样式表到？

150 css  django  django-forms 

这是我在Chrome中遇到的错误，不幸的是搜索它并没有给我太多结果。字体本身显示正确。但是我仍然收到此错误/警告。更具体地说，这是完整的警告： “无法解码下载的字体： http：// localhost：8000 / app / fonts / Lato / ” 我的CSS是： @font-face { font-family:"Lato"; src: url("../fonts/Lato/"); } html, body { font-family:'Lato'; } 我只是不明白。正确应用了字体，但是警告始终存在。尝试使用Sans-Serif该字体会使字体恢复为正常的浏览器字体，也许是这样，但是我不确定，即使搜索后也什么也没找到。谢谢！ 编辑 有各种字体文件，都来自同一家族。我正在尝试全部加载。字体文件是.ttf。我从本地文件夹加载它们，并有各种字体文件，如Lato-Black.ttf，Lato-Bold.ttf，Lato-Italic.ttf等。

149 css  html  fonts 

我真的很想让一段文字在不使用JavaScript或文字修饰的情况下闪烁出旧式风格。 没有过渡，只有* blink *，* blink *，* blink *！ 编辑：这不同于那个问题，因为我要求不连续转换的眨眼，而其他问题的OP问如何用连续转换来代替眨眼

149 html  css  css-animations  blink 

我使用html5 canvas元素在浏览器中调整图像大小。事实证明，质量很低。我发现了这一点：在缩放<canvas>时禁用插值，但它无助于提高质量。 下面是我的css和js代码，以及用Photoshop调用并在canvas API中缩放的图像。 在浏览器中缩放图像时，我该怎么做才能获得最佳质量？ 注意：我想将大图像缩小为小图像，修改画布中的颜色并将结果从画布发送到服务器。 CSS： canvas, img { image-rendering: optimizeQuality; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; } JS： var $img = $('<img>'); var $originalCanvas = $('<canvas>'); $img.load(function() { var originalContext = $originalCanvas[0].getContext('2d'); originalContext.imageSmoothingEnabled = false; originalContext.webkitImageSmoothingEnabled = false; originalContext.mozImageSmoothingEnabled = false; originalContext.drawImage(this, 0, 0, 379, 500); …

149 javascript  css  html  canvas  html5-canvas 

CodePen：http ://codepen.io/anon/pen/RPNpaP 。 在并排视图中，我希望红色框的宽度只有25 em-我正试图通过在此媒体查询中设置CSS来实现这一点： @media all and (min-width: 811px) {...} 至： .flexbox .red { width: 25em; } 但是，当我这样做时，就会发生这种情况： http://i.imgur.com/niFBrwt.png 知道我在做什么错吗？

149 html  css  flexbox 

我有一个透明的彩色png图像。我想使用css过滤器使整个图像变白，但保持透明度不变。CSS有可能吗？

149 css  css-filters 

我需要居中对齐水平菜单。 我尝试了各种解决方案，包括inline-block/ block/ center-align等等的组合，但是没有成功。 这是我的代码： <div class="topmenu-design"> <!-- Top menu content: START --> <ul id="topmenu firstlevel"> <li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li> <li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li> <li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li> </ul> <!-- Top menu content: END --> </div> 更新 我知道如何中心对齐的ul内部div。可以使用Sarfraz的建议来完成。但是列表项仍浮动在内ul。 我是否需要Javascript才能完成此任务？

148 css  xhtml  menuitem 

从TABLE布局切换到DIV布局以来，一个普遍的问题仍然存在： 问题：您用动态文本填充DIV，并且不可避免地会有一个超长单词延伸到div列的边缘，使您的网站看起来不专业。 RETRO-WHINING：表格布局从未发生过这种情况。一个表格单元将总是很好地扩展到最长单词的宽度。 严重性：我什至在大多数主要站点上都遇到了这个问题，尤其是在德国站点上，这些站点甚至连诸如“速度限制”之类的通用词都非常长（“ Geschwindigkeitsbegrenzung”）。 有人对此有可行的解决方案吗？

148 css  layout  html 

我正在写一个页面，我需要一个HTML表来保持设置的大小。我需要表顶部的标题始终保持在该位置，但是无论表中添加了多少行，我都需要表的主体进行滚动。想一个Excel的迷你版。这似乎是一项简单的任务，但是我在网络上发现的几乎每个解决方案都有一些缺点。我该如何解决？

148 javascript  html  css  html-table 

我想将背景图像居中。没有使用div，这是CSS样式： body{ background-position:center; background-image:url(../images/images2.jpg) no-repeat; } 上面的CSS会全部平铺并将其居中，但是看不到一半的图像，只是向上移动了一点。我想做的就是将图像居中。我可以在21英寸的屏幕上观看图像吗？

148 css 

我偶然发现了这个问题，发现用户使用的是我从未见过的符号： @font-face { /* CSS HERE */ } 那么，这个@符号在CSS3中是新出现的，还是在某种程度上被我忽略的旧事物？这是否类似于您使用ID #和使用类的位置.？Google没有给我任何与此相关的好文章。@CSS中符号的目的是什么 ？

148 css  syntax  symbols 

我需要在父div上加上圆角以掩盖其子级的内容。overflow: hidden可以在简单的情况下工作，但是当父级相对或绝对定位时，在基于Webkit的浏览器和Opera中会中断。 这适用于Firefox和IE9： 的CSS #wrapper { width: 300px; height: 300px; border-radius: 100px; overflow: hidden; position: absolute; } #box { width: 300px; height: 300px; background-color: #cde; } 的HTML <div id="wrapper"> <div id="box"></div> </div> JSFiddle上的示例 谢谢您的帮助！ 更新：导致此问题的错误已在Chrome中修复。我还没有重新测试Opera或Safari。

147 html  rounded-corners  css