Questions tagged «css»

如何制作我的flex项（article在本示例中），而它flex-grow: 1; 不会溢出它的flex父项/容器（main）？ 在此示例article中，只是文本，尽管它可能包含其他元素（tables等）。 main, aside, article { margin: 10px; border: solid 1px #000; border-bottom: 0; height: 50px; } main { display: flex; } aside { flex: 0 0 200px; } article { flex: 1 0 auto; } <main> <aside>x x x x x x x x x x x …

75 css  flexbox 

假设您有类似的内容： <div class="parent"> <input class="childInput" type="text" /> <div class="sibling"></div> </div> 当孩子获得焦点时，我想更改父母/兄弟姐妹的外观。做这样的事情有CSS技巧吗？ 编辑： 我的问题的原因如下： 我正在创建一个需要可编辑文本字段的Angular应用。在单击之前，它应该看起来像一个标签，此时它应该看起来像是普通的文本输入。我基于：focus设置了文本字段样式，以实现此效果，但是文本被文本输入的边界所截断。我还使用ng-show，ng-hide，ng-blur，ng-keypress和ng-click在标签和基于模糊，按键和点击的文本输入之间进行切换。除一件事外，此方法运行良好：标签的ng-click =“ setEdit（this，$ event）”将ng-show和ng-hide使用的编辑布尔值更改为true后，它使用jQuery调用.select（）文字输入。但是，直到ng-click完成后，所有内容才被$ digestd，因此文本输入再次失去焦点。由于文字输入从未真正获得焦点， 编辑： 这是该问题的一个小例子：http ://plnkr.co/edit/synSIP? p= preview

75 javascript  html  css  angularjs  focus 

我想知道当向下滚动页面时如何使粘性标头收缩（带有动画），而当页面向上滚动至顶部时又如何回到正常状态。这里有两个例子需要澄清： http://themenectar.com/demo/salient/ http://www.kriesi.at/themes/enfold/ 我得到了固定的零件，但是当用户向下滚动时，应该如何缩小标题呢？ 万分感谢

74 javascript  jquery  html  css  web-deployment 

我正在尝试使用ng-animate类似于JQueryslideUp()和的行为slideDown()。只有我宁愿使用ng-show 我在这里查看ng-animate教程-http: //www.yearofmoo.com/2013/04/animation-in-angularjs.html， 我可以在提供的示例中再现淡入/淡出效果。 我如何更改CSS来获得向上/向下滑动的行为？另外，如果可能的话，最好让CSS不知道以像素为单位的组件高度。这样，我可以将CSS重用于不同的元素。

74 css  angularjs 

我尝试使用以下CSS禁用输入控件时更改其颜色。 input[disabled='disabled']{ color: #666; } 这适用于大多数浏览器，但不适用于IE。我可以更改任何其他样式属性，例如背景颜色，边框颜色等，只是不更改颜色。谁能解释一下？

74 html  css  internet-explorer 

对于Google而言，这是不可能的，因为每个谈论:before和:after伪元素的文章似乎都使用“内容”一词。 我在这篇CSS-Tricks文章中听说了这一点，解释了如何实现图像滑块作为Web组件的示例用例。因此，它出现在内部的代码示例为： 的CSS #slides ::content img { width: 25%; float: left; } 的HTML <template> ... <div class="inner"> <content select="img"></content> </div> </template> 似乎是指该<content>标签，该标签用于允许用户包括Web组件，但我希望对此有更深入的了解。 编辑： 在进一步阅读之后，在上述文章中，我找到了作者的“ Shadow DOM CSS Cheatsheet”链接，其中包括一段解释什么是::content伪元素的段落： 选择元素内部的分布式节点。对于不支持本机选择器的浏览器，需要与polyfill-next-selector配对。 ::content h1 { color: red; } 资料来源：http : //robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet/ 这是有帮助的，但是我仍然发现整个事件相当不透明。还有其他见解吗？

74 html  css  css-selectors  web-component  shadow-dom 

使用CSS 3，有什么方法可以垂直对齐块元素？你有例子吗？谢谢。

74 css  html  vertical-alignment  alignment 

我想将div放在列表下方，但实际上它位于列表旁边。列表是动态生成的，因此没有固定的高度。我想将map div放在右边，将div放在列表的顶部（在地图的旁边），将第二div放在列表的下面（但仍然在map的右边） #map { float:left; width:700px; height:500px; } #list { float:left; width:200px; background:#eee; list-style:none; padding:0; } #similar { float:left; width:200px; background:#000; } <div id="map">Lorem Ipsum</div> <ul id="list"><li>Dolor</li></li>Sit</li><li>Amet</li></ul> <div id ="similar"> this text should be below, not next to ul. </div> 运行代码段隐藏结果展开摘要 有任何想法吗？

74 html  css 

我从图形设计师那里得到了一些布局的说明，该布局为某些元素指定了“ track 100”。在CSSletter-spacing中，“跟踪”的等效属性。 给定用于跟踪的值，您如何将其表示为CSS值（以像素为单位）？

74 html  css 

我想在CSS之间切换，因此当用户单击按钮（#user_button）时，它会显示菜单（#user_options）并更改CSS，而当用户再次单击它时，它将恢复正常。到目前为止，这就是我所拥有的： $('#user_button').click( function() { $('#user_options').toggle(); $("#user_button").css({ borderBottomLeftRadius: '0px', borderBottomRightRadius: '0px' }); return false; }); 有人可以帮忙吗？

74 jquery  css  toggle 

我一直使用Firebug和IE Developer Toolbar来调试棘手的CSS问题。但是，有时会出现棘手的错误，仅在您打印页面时才会出现。 您使用什么技术/工具来诊断此类问题？有没有办法在打印视图中充分利用传统的CSS调试工具？ 更新：我已经使用PDF打印机以避免浪费纸张；我的问题是我无法右键单击打印的DOM。下面的其他一些答案非常有帮助，谢谢。:-)

74 css 

如果我知道要通过图像标签显示的图像的高度和宽度，我应该包括height和width属性，还是仅将信息放入CSS中？或两者？ 例如 <img src="profilepic.jpg" height="64" width="64" /> 要么 <img src="profilepic.jpg" height="64" width="64" style="height: 64px; width: 64px;" /> 要么 <img src="profilepic.jpg" style="height: 64px; width: 64px;" />

74 html  css  image 

容器装好后，不应该将容器中的物品切掉border-radius吗？ 示例HTML和CSS： .progressbar { height: 5px; width: 100px; border-radius: 5px; } .buffer { width: 25px; height: 5px; background: #999999; } <div class="progressbar"> <div class="buffer"></div> </div> 运行代码段隐藏结果展开摘要 如您所见，我border-radius在容器（.progressbar）上使用，但是内容（.buffer）在容器的“外部”。我在Google Chrome上看到了这个。 这是预期的行为吗？ PS这不是关于如何修复它，而是关于它是否应该像这样工作。

74 css 

对于给定的div我只想在左侧，右侧，顶部或底部显示边框。 目前，我有以下内容，这在所有方面都设置了边框： #testdiv { border: 1px solid; } 为了只在左侧有边框，我需要做什么？

74 css  border 

我有一个名为.side-el的div，我希望该位置为：fixed; 行为，但是一旦我将位置固定，宽度就会从右边的位置开始交替变化。正确的宽度将是flexbox设置的宽度。我怎样才能实现这个目标？ .container { -webkit-align-content: flex-start; align-content: flex-start; -webkit-align-items: flex-start; align-items: flex-start; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content: flex-start; * { box-sizing: border-box; -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-shrink: 0; flex-shrink: 0; } } .main-el { box-sizing: border-box; padding:0 2em; width: 70%; …

74 css  flexbox