Questions tagged «css»

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

5
input [type ='text'] CSS选择器不适用于默认类型的文本输入吗？
默认输入类型为“文本”。我一直认为，input[type='text']即使没有在控件上明确声明类型，CSS声明定位也会影响这些输入。但是，我只是注意到我的默认类型文本输入没有获得样式。为什么会这样呢？我该如何解决呢？ input[type='text'] { background: red; } <input name='t1' type='text' /> /* Is Red */ <input name='t1' /> /* Is Not Red */ 运行代码段Hide results展开摘要
7
网站的Metro主题
有谁知道使用Windows Phone 7（如Metro主题）为网站设置样式的简单方法？ 无论是CSS或jQuery基于主题会工作。
67 jquery  css  themes 
3
不间断空间的处理：<p>＆nbsp; </ p>与<p> </ p>
&amp;nbsp; 是一个不间断的空格，表示没有换行的空白空间。 如果我用 &lt;p&gt;&amp;nbsp;&lt;/p&gt; 我在两个段落之间有一个空格（较大的中断）。如果我用 &lt;p&gt; &lt;/p&gt; 我在两个段落之间只有一个换行符（不间断）。为什么？
67 html  css  space 
16
我想在选择框中垂直对齐文本
我想在选择框中垂直对齐文本。我尝试使用 select{ verticle-align:middle; } 但是它不适用于任何浏览器。Chrome似乎默认将选择框中的文本与中间对齐。FF将其顶部对齐，IE将其底部对齐。有什么办法可以做到这一点？我在UIBinder中使用GWT的Select小部件。 这是我目前拥有的： select{ height: 28px !important; border: 1px solid #ABADB3; margin: 0; padding: 0; vertical-align: middle; } 谢谢！
5
Visual Studio 2010中的CSS 3.0
我想在Visual Studio 2010中使用Validation（CSS 3.0）而不是CSS 2.1。我通过SO进行了扫描，发现有一条评论说3.0尚未最终确定，因此2008年不可用，但不确定是否可以适用于2010年。 我是否不使用CSS 3？
11
如何为触摸设备优化网站
在iPhone / iPad / Android等触摸设备上，可能很难用手指按一下小按钮。据我所知，没有跨浏览器的方法可以通过CSS媒体查询来检测触摸设备。因此，我检查浏览器是否支持Javascript触摸事件。到目前为止，其他浏览器尚不支持它们，但是开发人员通道上的最新Google Chrome浏览器启用了触摸事件（即使对于非触摸设备也是如此）。而且我怀疑其他的浏览器制造商也会效仿，因为带有触摸屏的笔记本电脑即将问世。更新：这是Chrome中的错误，因此JavaScript检测现在可以再次使用。 这是我使用的测试： function isTouchDevice() { return "ontouchstart" in window; } 问题在于，这仅测试浏览器是否支持触摸事件，而不支持设备。 有人知道The Correct [tm]为触摸设备提供更好的用户体验的方法吗？除了嗅探用户代理。 Mozilla对触摸设备有媒体查询。但是我没有在其他任何浏览器中看到过类似的东西：https : //developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled 更新：我想避免为移动/触摸设备使用单独的页面/站点。该解决方案必须使用对象检测或来自JavaScript的类似检测来检测触摸设备，或者包含自定义的触摸CSS，而无需用户代理嗅探！我问的主要原因是要确保今天无法联系我CSS3工作组。因此，如果您不能遵循问题中的要求，请不要回答;）
6
触摸设备的文档.click功能
我有一个使用jquery的子导航-用户单击顶层列表项，例如触发下拉菜单的“服务”。通过单击“服务”链接可以切换下拉菜单。我做到了，以便用户可以单击屏幕上的任意位置以将下拉列表切换到关闭状态。但是，由于该站点具有响应能力，因此我希望用户能够在屏幕上的任意位置单击（触摸）以关闭下拉菜单，但是我的问题是它无法在触摸设备上正常工作。 我的文档单击代码设置为： $(document).click(function(event) { if ( $(".children").is(":visible")) { $("ul.children").slideUp('slow'); } }); 我假设document.click可能无法在触摸设备上使用，如果不能，那么有什么解决方法可以达到相同的效果？ 谢谢
67 jquery  css 
4
使用CSS不平等地居中DIV
我正在使用flexbox将DIV居中放置在另一个DIV中。想一想需要时会在屏幕中央弹出的对话窗口。 它可以正常工作，但是如果对话框上方和下方的空间不完全相等，则剩余空间的40％会位于对话框上方和60％的下方，这样看起来会好得多。之所以变得棘手，是因为对话框的高度随内部文本的数量而变化。 因此，例如，如果浏览器高度为1000像素，对话框窗口高度为400像素，我希望剩余的垂直空间（600像素）为对话框上方240像素和对话框下方360像素。我可以用Javascript来做，但是我很好奇CSS是否有一些巧妙的方法。我尝试在#dialogBox DIV中添加底部边距，但是当对话框高度接近浏览器高度时，此方法不起作用。 #dialogBoxPanel { position:absolute; display:flex; align-items:center; justify-content:center; left:0px; top:0px; width:100%; height:100%; } #dialogBox { width:350px; } &lt;div id="dialogBoxPanel"&gt; &lt;div id="dialogBox"&gt;Text&lt;/div&gt; &lt;/div&gt; 运行代码段隐藏结果展开摘要
23 html  css  flexbox  centering 
10
如何清除背景色相同的三个div之间的怪异间隙？
我在这个问题上苦苦挣扎了一段时间。在移动设备（Android和iOS）上可以看到此问题，某些设备可能需要放大一点。在PC上，当切换到移动模式时，我还可以在Chrome浏览器上重现此错误。以下是用于重现该错误的代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;style&gt; .top { height: 100px; background-color: #553213; } .middle { height: 100px; background-color: #553213; } .bottom { height: 100px; background-color: #553213; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div style="width:300px; height: 300px"&gt; &lt;div class="top"&gt;&lt;/div&gt; &lt;div class="middle"&gt;&lt;/div&gt; &lt;div class="bottom"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; 运行代码段隐藏结果展开摘要 预期结果将是使用＃553213颜色实现的div。但是，在某些移动设备上，它们在这三个div之间显示其他线条（或间隙）。 我的iPhone 在我的PC上，通过移动模式使用Chrome浏览器 有人知道这是怎么回事吗？任何关于它如何发生以及如何解决它的想法都将不胜感激。
23 html  css 
7
删除先前设置的边框颜色
function validate() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; if (username == "") { document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY"; document.getElementById("username").style.borderColor = "red"; return false; } if (password == "") { document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY"; document.getElementById("password").style.borderColor = "red"; return false; } } #username:focus { background-color: yellow; …
20 javascript  html  css 
8
如何证明两个HTML页面看起来相同？
例如，我有这个： &lt;pre&gt; sun&lt;br/&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;mercury &lt;br/&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;venus &lt;br/&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;earth &lt;br/&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;mars &lt;br/&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;jupiter &lt;br/&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;saturn &lt;br/&gt; &lt;/pre&gt; 运行代码段隐藏结果展开摘要 和这个： &lt;div style="font-family:monospace"&gt; &lt;div style="text-indent: 0"&gt;sun&lt;/div&gt; &lt;br/&gt; &lt;div style="text-indent: 4ch"&gt;mercury&lt;/div&gt; &lt;br/&gt; &lt;div style="text-indent: 4ch"&gt;venus&lt;/div&gt; &lt;br/&gt; &lt;div style="text-indent: 8ch"&gt;earth&lt;/div&gt; &lt;br/&gt; &lt;div style="text-indent: 8ch"&gt;mars&lt;/div&gt; &lt;br/&gt; &lt;div style="text-indent: 12ch"&gt;jupiter&lt;/div&gt; &lt;br/&gt; &lt;div style="text-indent: 4ch"&gt;saturn&lt;/div&gt; &lt;br/&gt; &lt;/div&gt; 运行代码段隐藏结果展开摘要 …
19 html  css  acid3 
5
垂直滚动时不允许水平滚动（反之亦然）
我有一个列表，overflow-x并且overflow-y设置为auto。此外，我已经设置了动量滚动，因此使用可以在移动设备中很好地进行触摸滚动webkit-overflow-scrolling: true。 但是，问题在于，我无法弄清楚在垂直滚动时如何禁用水平滚动。这会导致非常糟糕的用户体验，因为向左上方或右上方滑动会导致表格沿对角线滚动。当用户垂直滚动时，我绝对不希望任何水平滚动，直到用户停止垂直滚动为止。 我尝试了以下方法： JS： offsetX: number; offsetY: number; isScrollingHorizontally = false; isScrollingVertically = false; //Detect the scrolling events ngOnInit() { this.scrollListener = this.renderer.listen( this.taskRows.nativeElement, 'scroll', evt =&gt; { this.didScroll(); } ); fromEvent(this.taskRows.nativeElement, 'scroll') .pipe( debounceTime(100), takeUntil(this.destroy$) ) .subscribe(() =&gt; { this.endScroll(); }); } didScroll() { if ((this.taskRows.nativeElement.scrollLeft != this.offsetX) …
10
使用环绕创建相等大小的div
我正在尝试创建一个菜单系统，上面和下面的图像和文本。数据是动态的。我希望菜单系统出现，以使每个图像彼此之间的距离相等，以便它们在水平和垂直图像网格中对齐。 问题是文本。如果文本比图像长，则div会放大。但是，由于图像不再彼此等距分布，因此会产生尴尬的外观间隙。 要解决此问题，我认为最好的方法是让其他每个div都采用较大div的大小。但是，我不确定该怎么做。 我已经尝试过使用flexbox使用该flex-wrap属性。虽然包装得很好，但我还没有找到一种方法来使每个图像彼此等距对齐。 我该如何实现这一目标？ 我的代码如下： #outer { display: flex; } #main { display: flex; justify-content: space-between; flex-wrap: wrap; border: solid black 25px; border-radius: 25px; width: 450px; height: 500px; padding: 20px; } .section { background-color: #ddd; padding: 15px; } .label, .icon { text-align: center; } &lt;div id="outer"&gt; &lt;div id="main"&gt; &lt;div …
17 html  css  flexbox 
2
如何创建等距虚线圆？
我想用CSS制作一个虚线圆，并通过以下过程创建它。 尽管可以通过此过程显示虚线圆，但虚线的末尾与起点之间的间隙变窄，并且间隙不均匀。 .c { width: 500px; height: 500px; border-width: 15px; border-style: dashed; border-radius: 600px; } &lt;div class="c"&gt;&lt;/div&gt; 运行代码段Hide results展开摘要 有没有办法使差距均匀？我们还能控制破折号之间的距离吗？ 如果单靠CSS无法做到这一点，我们正在考虑使用JavaScript或类似的工具。
16 javascript  html  css 
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.