Questions tagged «css»

我有一个头div作为包装div中的第一个元素，但是当我在头div内的h1中添加顶部边距时，它将整个头div向下推。我意识到，只要我在页面上的第一个可见元素上应用上边距，就会发生这种情况。 这是一个示例代码片段。谢谢！ div#header{ width: 100%; background-color: #eee; position: relative; } div#header h1{ text-align: center; width: 375px; height: 50px; margin: 50px auto; font-size: 220%; background: url('../../images/name_logo.png') no-repeat; } <div id="header"> <h1>Title</h1> <ul id="navbar"></ul> </div> 运行代码段隐藏结果展开摘要

126 html  css  xhtml 

使用这种语法有什么意义 div.card > div.name 这有什么区别 div.card div.name

126 css  css-selectors 

我有选择的元素，我想删除的箭头，然后我可以添加其他图标..我能做到这一点的Firefox Safari和Chrome，但这并没有工作IE9。 .styled-select select { border: 0 !important; /*Removes border*/ -webkit-appearance: none; /*Removes default chrome and safari style*/ -moz-appearance: none; /*Removes default style Firefox*/ background: url('select_icon.png') no-repeat; background-position: 179px 7px; text-indent: 0.01px; text-overflow: ""; color: #FCAF17; width:200px; } SEE 小提琴上的IE9。我所需要的就是删除ie9中的箭头，请JSFIDDLE回答。

126 html  css  html-select 

我有两个图像需要保持内联；我想在每个图像下写一个标题。 <center> <a href="http://example.com/hello"> <img src="hello.png" width="100px" height="100px"> </a>              <a href="http://example.com/hi"> <img src="hi.png" width="100px" height="100px"> </a> </center> 我该如何实施？

126 css  html 

有没有办法为Web开发人员，以关闭Chrome / Safari / WebKit的拼写检查对特定input或textarea元素？我的意思是通过特殊标签属性或专有CSS指令。 有一条CSS指令可以关闭inputs的轮廓，所以我认为可能也存在。我知道用户怎么做。 或者，作为用户，我可以在某些特定域中禁用它吗？

126 html  css  google-chrome  spell-checking 

我的页面上有一个按钮，单击该按钮时div，屏幕中间会显示一个（弹出样式）。 我正在使用以下CSS将居中div在屏幕中间： .PopupPanel { border: solid 1px black; position: absolute; left: 50%; top: 50%; background-color: white; z-index: 100; height: 400px; margin-top: -200px; width: 600px; margin-left: -300px; } 只要页面没有向下滚动，此CSS就可以正常工作。 但是，如果将按钮放在页面的底部，则单击该按钮时，该按钮将div显示在顶部，并且用户必须向上滚动才能查看的内容div。 我想知道div即使在页面滚动时也如何在屏幕中间显示。

126 html  css  scroll  position  centering 

我想保持#abc divat 50px和text 的高度在的中间垂直对齐div。 body{ padding: 0; margin: 0; margin: 0px auto; } #main{ position: relative; background-color:blue; width:500px; height:500px; } #abc{ font:Verdana, Geneva, sans-serif; font-size:18px; text-align:left; background-color:#0F0; height:50px; vertical-align:middle; } <div id="main"> <div id="abc"> asdfasdfafasdfasdf </div> </div> 运行代码段隐藏结果展开摘要

126 css  vertical-alignment 

我正在尝试将工具提示颜色更改为红色。但是，我也想拥有其他多种颜色，所以我不只是要替换原始工具提示的颜色。 我将如何去做呢？

126 html  css  twitter-bootstrap 

似乎最近有一个Google Chrome浏览器更新，导致在执行之后文字模糊transform: scale()。具体来说，我正在这样做： @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } 如果您在Chrome中访问http://rourkery.com，则应该在主要文本区域中看到问题。它以前没有这样做，并且似乎也没有影响其他Webkit浏览器（例如Safari）。还有其他一些关于人们在使用3d变换时遇到类似问题的帖子，但找不到关于2d变换的任何信息。 任何想法将不胜感激，谢谢！

126 google-chrome  css  webkit  transform  css-animations 

我想在单行中呈现此列表。 清单项目1 清单项目2 应该显示为 *列出项目2 *列出项目2 使用什么CSS样式？

126 css 

我试图让我的水平规则，以忽略父填充。 这是我所拥有的一个简单示例： #parent { padding:10px; width:100px; } hr { width:100px; } 您会发现水平尺超出父级10像素。我试图让它忽略父div中其他所有内容所需的填充。 我知道我可以为其他所有内容创建一个单独的div；这不是我要寻找的解决方案。

126 html  css 

在auto做什么margin:0 auto;？ 我似乎无法理解是什么auto。我知道有时有时会使对象居中。谢谢。

126 css 

是否可以在不使用媒体查询的情况下进行CSS网格环绕？ 就我而言，我有不确定数量的项目要放置在网格中，并且希望该网格包装。使用Flexbox，我无法可靠地很好地分隔事物。我也想避免一堆媒体查询。 这是一些示例代码： .grid { display: grid; grid-gap: 10px; grid-auto-flow: column; grid-template-columns: 186px 186px 186px 186px; } .grid > * { background-color: green; height: 200px; } <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> 运行代码段隐藏结果展开摘要 这是一张GIF图片： 附带说明一下，如果有人能告诉我如何避免像我一样指定所有项目的宽度，grid-template-columns那将是很好的。我希望孩子们指定自己的宽度。

126 html  css  css-grid 

我正在尝试使图像（动态放置，不受尺寸限制）的宽度与其父div一样宽，但前提是该宽度不比其自身的宽度100％宽。我已经尝试过了，但无济于事： img { width: 100%; height: auto; max-width: 100%; } 这些图像中的许多图像都比其父div宽得多，这就是为什么我希望它们进行相应调整的原因，但是当一个小图像弹出并放大到超出其正常尺寸时，它看起来确实很糟糕。有什么办法吗？

125 html  width  css 

我正在寻找一种更改JavaScript中伪类选择器（例如：link，：hover等）的CSS规则的方法。 因此类似于CSS代码：a:hover { color: red }在JS中。 我在其他任何地方都找不到答案。如果有人知道这是浏览器不支持的功能，那也将是一个有益的结果。

125 javascript  css  pseudo-class  css-in-js