Questions tagged «css»

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

4
如何左右对齐flexbox列?
使用典型的CSS,我可以左右浮动两列中的一列,并在其间留一些装订线空间。我该如何使用flexbox? http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display: flex; } #a { width: 20%; border: solid 1px #000; } #b { width: 20%; border: solid 1px #000; height: 200px; } <div id="container"> <div id="a"> a </div> <div id="b"> b </div> </div> 运行代码段Hide results展开摘要
121 html  css  flexbox 

14
禁止在`<input type = number>`上滚动
是否可以禁用滚轮在输入数字字段中更改数字?我已经弄乱了特定于Webkit的CSS,以删除微调框,但我想完全摆脱这种行为。我喜欢使用type=number它,因为它在iOS上带来了不错的键盘。
121 javascript  css  html  forms 

11
反应本机文本从我的屏幕上消失,拒绝换行。该怎么办?
在此实时示例中可以找到以下代码 我有以下反应本机元素: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( &lt;View style={styles.container}&gt; &lt;View style={styles.descriptionContainerVer}&gt; &lt;View style={styles.descriptionContainerHor}&gt; &lt;Text style={styles.descriptionText} numberOfLines={5} &gt; Here is a really long text that you can do nothing about, its gonna …

13
CSS3背景图片过渡
我正在尝试使用CSS过渡创建“淡入淡出”效果。但是我不能让它与背景图像一起使用... CSS: .title a { display: block; width: 340px; height: 338px; color: black; background: transparent; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; } .title a:hover { background: transparent; background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background …


10
表格中特定行的边框?
我正在尝试设计一些HTML / CSS,可以在表格中的特定行周围放置边框。是的,我知道我真的不应该使用表格进行布局,但是我还不了解足够的CSS来完全替代它。 无论如何,我有一个包含多个行和列的表,其中一些与rowpan和colspan合并,我想在表的各个部分周围放置一个简单的边框。当前,我正在使用4个单独的CSS类(顶部,底部,左侧,右侧),分别附加到&lt;td&gt;表格顶部,底部,左侧和右侧的单元格。 .top { border-top: thin solid; border-color: black; } .bottom { border-bottom: thin solid; border-color: black; } .left { border-left: thin solid; border-color: black; } .right { border-right: thin solid; border-color: black; } &lt;html&gt; &lt;body&gt; &lt;table cellspacing="0"&gt; &lt;tr&gt; &lt;td&gt;no border&lt;/td&gt; &lt;td&gt;no border here either&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td …
120 html  css  border  css-tables 

6
CSS3连续旋转动画(就像正在加载日d一样)
我正在尝试通过使用PNG和CSS3动画复制Apple风格的活动指示器(日程加载图标)。我使图像旋转并连续进行,但是在动画完成之后似乎有延迟,然后再进行下一个旋转。 @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } #loading img { -webkit-animation-name: rotate; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: infinite; -webkit-transition-timing-function: linear; } 我尝试过更改动画的持续时间,但是没有影响,如果您将其放慢,请说5秒,这更明显,那就是在第一次旋转后会有一个暂停,然后再次旋转。我想摆脱的是这个停顿。 非常感谢任何帮助,谢谢。

7
表格,tr或td可以使用最小高度吗?
我正在尝试在表中显示接收的一些详细信息。 我希望那张桌子有一个最小的高度来展示产品。因此,如果只有一种产品,则该表的末尾将至少有一些空白。另一方面,如果有5个或更多产品,就不会有空白。 我尝试使用此CSS: table,td,tr{ min-height:300px; } 但这是行不通的。 提前致谢。
120 html  css 

14
物化CSS-选择似乎不渲染
我目前正在使用Materialized CSS,似乎我对选择字段感到困惑。 我使用的是他们网站上提供的示例,但不幸的是,它始终在视图中呈现。我想知道是否有人可以提供帮助。 我正在尝试做的是创建一个带有2个提供填充的末端分隔符的行-然后在内部两行项目中应该有一个搜索文本输入和一个搜索选择下拉列表。 这是我正在使用的示例:http : //materializecss.com/forms.html 先感谢您。 这是有问题的代码段。 &lt;div class="row"&gt; &lt;form class="col s12"&gt; &lt;div class="row"&gt; &lt;div class="input-field col s2"&gt;&lt;/div&gt; &lt;div class="input-field col s5"&gt; &lt;input id="icon_prefix" type="text" class="validate" /&gt; &lt;label for="icon_prefix"&gt;Search&lt;/label&gt; &lt;/div&gt; &lt;div class="input-field col s3"&gt; &lt;label&gt;Materialize Select&lt;/label&gt; &lt;select&gt; &lt;option value="" disabled="disabled" selected="selected"&gt;Choose your option&lt;/option&gt; &lt;option value="1"&gt;Option 1&lt;/option&gt; &lt;option value="2"&gt;Option …

15
如何在使div保持比例的同时用它填充图像?
我找到了这个线索- 如何在保持图像的长宽比的同时拉伸图像以填充&lt;div&gt;?-这不完全是我想要的东西。 我有一个具有一定大小的div,并且其中有一个图像。我想始终用图像填充div,而不管图像是横向还是纵向。图像是否被剪切也没关系(div本身已隐藏溢出)。 因此,如果图像是人像我想要的width是100%和height:auto,使其保持在比例。如果图像是风景我想要的height是100%和width to beauto`。听起来很复杂吧? &lt;div class="container"&gt; &lt;img src="some-image.jpg" alt="Could be portrait or landscape"/&gt; &lt;/div&gt; 因为我不知道该怎么做,所以我只是简单地创建了我的意思的图像。我什至无法恰当地描述它。 所以,我想我不是第一个问这个问题的人。但是我真的找不到解决方案。也许有一些新的CSS3方式可以做到这一点-我正在考虑使用flex-box。任何想法?也许它比我预期的要容易得多?


6
如何仅使用CSS制作图像轮播?
我希望制作一个图像轮播,用户可以通过单击箭头在图像之间切换。例如: 但是,我只能使用HTML和CSS,而不能使用JavaScript(因此也不能使用jQuery)。我只需要基本设置;平滑过渡等不是必需的。 我该如何去实现呢?
119 javascript  jquery  html  css 



3
Bootstrap 3在移动设备的菜单/导航栏中滑动
关闭。这个问题需要调试细节。它当前不接受答案。 想改善这个问题吗?更新问题,使其成为Stack Overflow 的主题。 去年关闭。 改善这个问题 我正在构建一个基于浏览器的移动应用程序,因此我决定将Bootstrap 3用作设计的CSS框架。Bootstrap 3在导航栏中具有出色的“响应”功能,如果它检测到有关浏览器分辨率的特定“断点”,它将自动折叠。它在很多情况下都有效。 但是您最近是否注意到,很多基于浏览器的移动应用程序的主导航隐藏在屏幕的左侧,并且当按下(切换)右上角的切换图标时,主导航会滑到进入屏幕约2/3的右边?这是在移动设备上浏览基于浏览器的应用程序时越来越受欢迎的解决方案,并且我认为从理论上讲,修改引导css / js以适应此版本的导航折叠功能应该非常容易。 如何实现这些功能?似乎不需要太多修改。我真的很想听听您对此事的想法/解决方案。另外,我认为将Bootstrap实施为内置功能将是一个很好的长期解决方案。 不幸的是,我没有尝试创建此功能,因为尽管我熟悉这些技术,但我主要是一名PHP / MySQL开发人员,并且我认为该功能非常有用,应该由没有我见识的专家来构建。作为前端开发人员。

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.