Questions tagged «css»

我想div在屏幕顶部放置一根棍子，而不会影响其他元素，其子元素位于中间。 .parent { display: flex; justify-content: center; position: absolute; } <div class="parent"> <div class="child">text</div> </div> 运行代码段隐藏结果展开摘要 当我添加该position: absolute行时，justify-content: center将变得无效。它们是否相互冲突，解决方案是什么？ 编辑 谢谢大家，这是父母宽度的问题。但是我在React Native中，所以我不能设置width: 100%。尝试过flex: 1和align-self: stretch，都无法正常工作。我最终使用Dimensions来获取窗口的整个宽度，并且可以正常工作。 编辑 从较新版本的React Native（我使用0.49）开始，它接受width: 100%。

93 css  react-native  flexbox 

请注意，不是“样式”面板（我知道在这种情况下呈灰色表示不适用），而是下一个面板，即“计算属性”面板。 灰色显示计算属性是什么意思？ 例：

93 css  google-chrome  google-chrome-devtools 

我需要找到一种使用JavaScript更改CSS：hover属性的方法。 例如，假设我有以下HTML代码： <table> <tr> <td>Hover 1</td> <td>Hover 2</td> </tr> </table> 以及以下CSS代码： table td:hover { background:#ff0000; } 我想使用JavaScript将<td>悬停属性更改为例如background：＃00ff00。知道我可以使用JavaScript通过以下方式访问样式背景属性： document.getElementsByTagName("td").style.background="#00ff00"; 但是我不知道：hover的JavaScript等效项。如何使用JavaScript更改这些<td>的：hover背景？ 非常感谢您的帮助！

93 javascript  html  css  dhtml 

我的页面似乎在这里有问题：http : //www.lonewulf.eu 将鼠标悬停在缩略图上时，图像向右移动一点，仅在Chrome上发生。 我的CSS： .img{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; display:block; border:1px solid #121212; } .img:hover{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; -khtml-opacity: 1; display:block; }

92 css  image  google-chrome  hover  opacity 

我有一个bootstrap 2.32模态，试图将其动态插入另一个视图的HTML中。我正在使用Codeigniter 2.1。在向视图中动态插入引导模式部分视图之后，我具有： <div id="modal_target"></div> 作为要插入的目标div。我的视图中有一个按钮，看起来像： <a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a> 我的JS有： $.ajax({ type : 'POST', url : "AjaxUpdate/get_modal", cache : false, success : function(data){ if(data){ $('#modal_target').html(data); //This shows the modal $('#form-content').modal(); } } }); 主视图的按钮是： <div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div> 这是我想作为局部视图单独存储的内容： <div id="form-content" …

92 javascript  jquery  css  twitter-bootstrap  twitter-bootstrap-2 

是否可以使侧边栏导航始终固定在流体布局中的滚动上？

92 css  twitter-bootstrap  css-position  fluid-layout 

我在使用这个特定的CSS选择器时遇到了麻烦，当我添加:not(:empty)它时，它不希望工作。似乎可以与其他选择器的任何组合正常工作： input:not(:empty):not(:focus):invalid { border-color: #A22; box-shadow: none } 如果我删除了该:not(:empty)零件，它就可以正常工作。即使我将选择器更改为input:not(:empty)它，也不会选择输入了文本的输入字段。这是坏处还是我只是不允许:empty在:not()选择器中使用？ 我唯一想到的是浏览器仍在说该元素为空，因为它没有子元素，每个元素只有一个“值”。是否:empty选择不具有独立功能的输入元素与常规的元素？但这似乎不太可能，因为:empty在字段上使用并在其中输入内容会导致替代效果消失（因为它不再为空）。 在Firefox 8和Chrome中进行了测试。

92 html  css  css-selectors 

目前，我将其放在body标签中以禁用文本选择： body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 但是，我input和textarea框现在无法选择。我如何才能仅使这些输入元素为可选择的，而其余为不可选择的？

92 css 

这是问题所在。我有一张图片： <img alt="alttext" src="filename.jpg"/> 注意未指定高度或宽度。 在某些页面上，我只想显示一个缩略图。我无法更改html，因此我使用以下CSS： .blog_list div.postbody img { width:75px; } 哪一个（在大多数浏览器中）制作的页面具有统一的宽缩略图，所有缩略图均保留长宽比。 但是，在IE6中，图像仅按CSS中指定的尺寸缩放。它保留了“自然”的高度。 这是说明问题的一对页面示例： 该列表应显示缩略图 一篇博客文章，其中显示了完整尺寸的图像。 对于所有建议，我将非常感谢，但是我想指出一下（由于所选平台的客户端的局限性），我正在寻找不涉及修改html的内容。CSS也比javascript更可取。 编辑：应该提到图像的大小和纵横比不同。

92 javascript  css  internet-explorer  image  internet-explorer-6 

我最初使用HTML，CSS和JavaScript创建了一个Web应用程序，然后又被要求在Bootstrap中再次创建它。我做得很好，但是我在Web应用程序中将切换按钮改回了单选按钮（最初是复选框），而不是原来的切换按钮。 按钮的代码为： <label> Notifications <span class='toggle'> <input type='radio' class='notifications' name='notifications' id='notifications' /> </span> </li> <label> Preview <span class='toggle'> <input type='radio' class='preview' name='preview' id='preview' /> </span> </li> HTML页面链接到的JavaScript和CSS文件是： <script src = 'jqtouch.js'></script> <script src="jquery.js"></script> <script src="js/bootstrap.js"></script> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap-responsive.css" rel="stylesheet"> 有没有办法更改代码，以便可以将切换按钮找回来？

92 javascript  jquery  css  twitter-bootstrap  jqtouch 

我有这个代码： <footer class="row"> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 1</li> <li>Text 2</li> <li>Text 3</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 4</li> <li>Text 5</li> <li>Text 6</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 7</li> <li>Text 8</li> <li>Text 9</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 10</li> <li>Text 11</li> <li>Text 12</li> </ul> …

92 html  css  twitter-bootstrap  twitter-bootstrap-3  responsive-design 

我有以下标记： <div class="FixedHeightContainer"> <h2>Title</h2> <div class="Content"> ..blah blah blah... </div> </div> CSS看起来像这样： .FixedHeightContainer { float:right; height: 250px; width:250px; } .Content { ??? } 由于其内容，的高度div.Content通常大于所提供的空间div.FixedHeightContainer。此刻，div.Content快乐地延伸到了我的底部div.FixedHeightContainer-根本不是我想要的。 div.Content当其高度太大而无法容纳时，如何指定获取滚动条（最好仅是垂直的，但我并不挑剔）？ overflow:auto而overflow:scroll什么都不做，出于某种奇怪的原因。

92 css  scrollbar  overflow 

我有以下结构： <body> <div id="main-wrapper"> <header> </header> <nav> </nav> <article> </article> <footer> </footer> </div> </body> 我<article>使用javascript 动态加载内容。因此，<article>块的高度可以改变。 <footer>当有很多内容时，我希望该块位于页面底部；而当仅有几行内容时，我希望该块位于浏览器窗口的底部。 目前，我可以做一个或另一个...但是不能两者都做。 因此，有谁知道我该怎么做-将<footer>其固定在页面/内容的底部或屏幕的底部，具体取决于哪个较低。

92 css  html  footer 

我记得很久以前听说过，在CSS font-family属性中用引号引起来的字体名称包含多个单词，这被认为是“最佳实践”，例如： font-family: "Arial Narrow", Arial, Helvetica, sans-serif; 对于它的麻烦，我尝试从中删除引号，"Arial Narrow"而Safari和Firefox在呈现它时没有任何问题。 那么，这个经验法则是否有逻辑，还是只是一个神话？较旧的浏览器是否有问题，不再适用于当前版本？我这样做已经很久了，以至于我从未停止思考这是否真的必要。

92 css  font-family  quotation-marks 

我正在尝试使CSS动画属性在完成后保留，这可能吗？ 这就是我想要实现的目标... 当用户登陆页面时，该元素应该被隐藏，在3秒钟（或任何其他时间）之后，该元素应淡入，动画完成后应留在该页面上。 这是一个小提琴尝试... http://jsfiddle.net/GZx6F/ 这是保存代码。 <h2>Test</h2> <style> @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0.9; } } h2 { animation: fadeIn 1s ease-in-out 3s; } </style> 我知道如何使用jQuery ..就像这样... <h2>test</h2> <script> $(document).ready(function(){ $('h2').hide().delay(3000).fadeIn(3000) }); </script>

92 css  css-animations