Questions tagged «css»

这是CSS： div { width: 0; height: 0; border: 180px solid red; border-radius: 180px; } 它如何产生下面的圆圈？ 假设，如果矩形的宽度为180像素，高度为180像素，那么它将显示为： 应用边界半径30像素后，将显示如下： 矩形变得越来越小，也就是说，如果半径大小增加，矩形几乎会消失。 那么，如何将180像素的边界height/width-> 0px变成半径为180像素的圆？

206 html  css  css-shapes 

如何style=display:"block"在jQuery中添加元素？

206 javascript  jquery  html  css 

当前，当浏览器宽度降至768px以下时，导航栏将变为折叠模式。我想将此宽度更改为1000px，所以当浏览器低于1000px时，导航栏将变为折叠模式。我想在不使用LESS的情况下执行此操作，而是在使用手写笔而不是LESS。 我的问题与此问题相同：Bootstrap 3 Navbar折叠 但是，这些问题中的所有答案都说明了如何通过更改LESS变量来做到这一点。我还没有处理过LESS，我正在使用手写笔，所以我想知道如何使用手写笔或其他方法来完成此操作。 谢谢！

205 css  twitter-bootstrap  responsive-design  navbar  collapse 

我知道margin: 0 auto;元素上的设置用于使其居中（左右）。但是，我知道该元素及其父元素必须满足某些条件才能使用自动边距，而且我似乎永远无法正确理解魔术。 所以我的问题很简单：为了margin: 0 auto;使孩子左右居中，必须在元素及其父元素上设置哪些CSS属性？

205 css 

假设我有一个字符串“ 我喜欢大屁股，但我不能撒谎 ”，然后用剪下overflow:hidden，所以它显示如下： 我喜欢大屁股，我不能 剪掉文字。是否可以这样显示： 我喜欢大屁股，我不能... 使用CSS？

205 html  css 

我的页面上有ellipsis样式和动态数据。 .my-class { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 71px; } <span id="myId" class="my-class"></span> document.getElementById('myId').innerText = "..."; 我想添加具有相同内容的此元素工具提示，但我希望它仅在内容很长且省略号出现在屏幕上时才显示。 有什么办法吗？ 浏览器ellipsis被激活时是否会引发事件？ *浏览器：Internet Explorer

205 javascript  html  css  tooltip  ellipsis 

我正在为一个提高人们对互联网可访问性意识的基金会工作。对于演示，我们希望提供一个小型研讨会，模拟不同的残疾人士/残障人士。这是通过专门为此演示文稿创建的网站完成的。 表现出的一种障碍是震颤，这意味着手部动作难以控制。由于存在这种缺陷，很难精确地移动鼠标光标并在鼠标悬停在链接上时按鼠标按钮。一些老年人和帕金森氏症等疾病患者都可能患有震颤。 现在，我想以某种无法预测的方式移动鼠标光标，这样人们很难点击一个小按钮。由于JavaScript不允许直接移动鼠标光标，因此我正在寻找实现此目的的其他方法。我提出了以下想法： 使用模拟鼠标晃动的鼠标驱动程序/实用程序。 通过CSS隐藏鼠标光标，将摇动的鼠标光标的GIF动画放置在原始光标的位置（使用JavaScript），然后使目标链接每隔几秒钟单击一次。这至少会给人一种好像总是在错误的时刻点击的感觉。 尽管第一个想法很酷，但无论是Mac还是Windows，我都找不到这样的工具。而且我自己没有编程任何这类技能。 第二个想法似乎有些笨拙，但我认为它将达到预期的效果。 有人有其他想法吗？

204 javascript  html  css  accessibility  simulation 

我已经使用twitter bootstrap框架已有相当长的一段时间了，并且它们最近已更新到版本3！ 我在使粘性页脚停留在底部时遇到了麻烦，我使用了twitter bootstrap网站提供的启动程序模板，但还是没有运气，有什么想法吗？

204 html  css  twitter-bootstrap  twitter-bootstrap-3 

如您在下面的CSS中所看到的，我想child2将自己定位在之前child1。这是因为我当前正在开发的网站也可以在移动设备上工作，该网站child2应该位于底部，因为它包含了我想要的导航，该导航位于移动设备上的内容下方。-为什么没有2个母版页？这是divs在整个HTML中重新定位的仅有2个，因此，对于这个较小的更改，只有2 个母版页太过分了。 HTML： <div id="parent"> <div class="child1"></div> <div class="child2"></div> </div> CSS： parent { position: relative; width: 100%; } child1 { width: auto; margin-left: 160px; } child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; } child2 具有动态高度，因为不同的子站点可能具有更多或更少的导航项。 我知道绝对定位元素已从流中删除，因此被其他元素忽略。 我尝试overflow:hidden;在父div上进行设置，但这没有帮助，也不起作用clearfix。 我的最后一个选择是使用JavaScript重新定位两者divs，但是现在，我将尝试看看是否存在使用非JavaScript的方法。

204 html  css  position  master-pages  parent-child 

我使用HTML列表和CSS创建了一个水平菜单。除非您将鼠标悬停在链接上，否则一切都会正常进行。可以看到，我为链接创建了一个粗体悬停状态，现在由于粗体大小的差异，菜单链接发生了变化。 我遇到与此SitePoint帖子相同的问题。但是，该职位没有适当的解决方案。我到处都在寻找解决方案，但是找不到。当然，我不能成为唯一尝试这样做的人。 有人有什么想法吗？ PS：我不知道菜单项中文本的宽度，因此我不能仅设置li项的宽度。 .nav { margin: 0; padding: 0; } .nav li { list-style: none; display: inline; border-left: #ffffff 1px solid; } .nav li a:link, .nav li a:visited { text-decoration: none; color: #000; margin-left: 8px; margin-right: 5px; } .nav li a:hover{ text-decoration: none; font-weight: bold; } .nav li.first { …

204 html  css  hover  text-size 

我有一个主要针对移动用户的网站，但也针对台式机。 在Mobile Safari上，使用<input type="number">效果很好，因为它会在只能包含数字的输入字段上弹出数字键盘。 但是，在Chrome和Safari中，使用数字输入会在字段的右侧显示旋转按钮，这在我的设计中看起来像废话。我真的不需要按钮，因为当您仍然需要编写6位数字之类的东西时，它们是无用的。 是否可以通过-webkit-appearance其他CSS技巧来禁用此功能？我尝试了很多运气。

203 css  html  webkit 

我有一个移动Web应用程序，它的无序列表包含多个列表项，每个li内都有一个超链接： ...我的问题是如何设置超链接的格式，以使它们在iPhone上查看时不会改变大小，并且加速计从纵向切换为横向？现在，我将超链接的字体大小指定为14px，但是切换到横向时，它的大小会高达20px。我希望字体大小保持不变。这是代码： ul li a { font-size:14px; text-decoration: none; color: #cc9999; } <ul> <li id="home" class="active"> <a href="home.html">HOME</a> </li> <li id="home" class="active"> <a href="test.html">TEST</a> </li> </ul> 运行代码段隐藏结果展开摘要

203 iphone  html  css 

是否可以为元素定义CSS样式，该样式仅在匹配的元素包含特定元素（作为直接子项）时才适用？ 我认为最好用一个例子来解释。 注意：我正在尝试设置父元素的样式，具体取决于它包含的子元素。 <style> /* note this is invalid syntax. I'm using the non-existing ":containing" pseudo-class to show what I want to achieve. */ div:containing div.a { border: solid 3px red; } div:containing div.b { border: solid 3px blue; } </style> <!-- the following div should have a red border …

203 html  css 

我在Flexbox中并排有2个div。右手应始终具有相同的宽度，我希望左手仅抓住剩余空间。除非我专门设置宽度，否则它不会。 因此，现在将其设置为96％，直到您真正按下屏幕为止，它看起来还可以-右手div有点饿了它所需的空间。 我想我可以保留原样，但感觉不对，就像必须要说的那样： 正确的人永远是相同的；你在左边-你得到剩下的一切 .ar-course-nav { cursor: pointer; padding: 8px 12px 8px 12px; border-radius: 8px; } .ar-course-nav:hover { background-color: rgba(0, 0, 0, 0.1); } <br/> <br/> <div class="ar-course-nav" style="display:flex; justify-content:space-between;"> <div style="width:96%;"> <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;"> <strong title="Course Name Which is Really Quite Long And Does Go On a Bit …

203 html  css  flexbox 

假设我有以下HTML： <h3>Features</h3> <ul> <li><img src="alphaball.png">Smells Good</li> <li><img src="alphaball.png">Tastes Great</li> <li><img src="alphaball.png">Delicious</li> <li><img src="alphaball.png">Wholesome</li> <li><img src="alphaball.png">Eats Children</li> <li><img src="alphaball.png">Yo' Mama</li> </ul> 和这个CSS： li { text-align:center; display:inline-block; padding:0.1em 1em } img { width:64px; display:block; margin:0 auto } 结果可以在这里看到：http : //jsfiddle.net/YMN7U/1/ 现在想象一下，我想将其分为三列，相当于<br>在第三列之后注入a <li>。（实际上，这样做在语义和语法上都是无效的。） 我知道如何<li>在CSS中选择第三个，但是如何在它之后强制换行呢？这不起作用： li:nth-child(4):after { content:"xxx"; display:block } 我也知道使用float代替可以实现这种特殊情况inline-block，但是我对使用的解决方案不感兴趣float。我也知道，对于固定宽度的块，可以通过将父对象的宽度设置为该宽度的ul3倍来实现。我对此解决方案不感兴趣。我也知道，display:table-cell如果我需要真实的列，可以使用它。我对此解决方案不感兴趣。我对强制在内联内容中中断的可能性感兴趣。 编辑：明确地说，我对“理论”感兴趣，而不是对特定问题的解决方案。CSS可以在display:inline(-block)?元素中间插入换行符吗，还是不可能？如果您确定这是不可能的，那是可以接受的答案。

202 html  css