小编G-C*_*Cyr的帖子
HTML表格:列宽百分比
我有一个7列的表.我希望列具有以下宽度:
- 3列x
width=20% - 4列x
width=10%
我创建了2个CSS类,每个宽度一个,我将它们分配给每个单元格.
我拥有的东西,这是行不通的.相反,宽度始终包含内容.如果我只放一个字母,比宽度会很小,如果我放大字符串,宽度会太大.我希望它不变.
CSS和HTML:
table {
width: 100%;
}
.ten {
width: 10%
}
.twenty {
width: 20%;
}<table>
<tr>
<th class="ten">H1</th>
<th class="ten">H2</th>
<th class="ten">H3</th>
<th class="twenty">H4</th>
<th class="twenty">H5</th>
<th class="twenty">H6</th>
<th class="ten">H7</th>
</tr>
<tr>
<td class="ten">A1</td>
<td class="ten">A2</td>
<td class="ten">A3</td>
<td class="twenty">A4</td>
<td class="twenty">A5</td>
<td class="twenty">A6</td>
<td class="ten">A7</td>
</tr>
<tr>
<td class="ten">B1</td>
<td class="ten">B2</td>
<td class="ten">B3</td>
<td class="twenty">B4</td>
<td class="twenty">B5</td>
<td class="twenty">B6</td>
<td class="ten">B7</td>
</tr>
</table>有人可以解释如何实现我想要的吗？
18
推荐指数
推荐指数
1
解决办法
解决办法
4万
查看次数
查看次数
使用css的渐变顶部边框
我想在div的顶部放一个渐变边框.
因此,起始颜色应为#c4268c,以#9a0b72结尾
<div class="bordertest"></div>
为了宽松,这里是小提琴:http://jsfiddle.net/aKhjk/
我搜索但找不到合适的方法.
12
推荐指数
推荐指数
1
解决办法
解决办法
3万
查看次数
查看次数
CSS Flex 溢出和居中
我正在尝试水平对齐一些元素。当元素很少时，我希望它们位于中心。这是有很多的地方，我想要一个水平滚动。
但是有一个问题，第一个和第二个元素被隐藏了。
.container {
display: flex;
flex-direction: row;
justify-content: center ;
overflow: scroll;
}
item {
width: 440px ;
height: 240px;
flex-shrink: 0;
}
例子：
.container {
display: flex;
flex-direction: row;
justify-content: center ;
overflow: scroll;
}
item {
width: 440px ;
height: 240px;
flex-shrink: 0;
}
.projets {
display: flex;
flex-direction: row;
justify-content: center;
overflow: scroll;
}
.projets .projet_outter {
width: 440px;
height: 240px;
flex-shrink: 0;
}
.projets .projet {
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, …6
推荐指数
推荐指数
1
解决办法
解决办法
4000
查看次数
查看次数
使用 CSS Grid 每隔一行着色
我想使用 CSS Grid 为我正在构建的表格中的每一行着色。但是我无法让它工作，我只能让其他所有列都着色。这是我想做的事情的图片。有没有更好的方法来构建它？我只使用 CSS Grid 因为它是我想学习的新东西。
这是我当前的代码：
.wrapper {
border-style: solid;
border-color: rgb(230, 230, 230);
font-weight: bold;
text-align: center;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(18, 35px);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.wrapper>div:nth-child(odd) {
background: #ddd;<div class="container">
<div class="wrapper">
<div>Month</div>
<div>Overtime Hours</div>
<div>Compensation Hours</div>
<div>Vacation</div>
<div>Personal Hours</div>
<div>Sick Hours</div>
<div>Carry Over</div>
<div>0.00</div>
<div>-</div>
<div>35.00</div>
<div>-</div>
<div>-</div>
<div>Allotted</div>
<div>-</div>
<div>-</div>
<div>140.00</div>
<div>14.00</div>
<div>-</div>
<div>Starting Total</div>
<div>0.00</div>
<div>-</div>
<div>175.00</div>
<div>14.00</div>
<div>-</div>
<div>Jan</div>
<div>-</div>
<div>-</div>
<div>-</div>
<div>2.00</div>
<div>7.00</div>
<div>Feb</div> …6
推荐指数
推荐指数
2
解决办法
解决办法
4240
查看次数
查看次数
隐藏在CSS边框形状后面的文本
我正在尝试使用背景颜色创建一个围绕文本的h1样式.
h1.skew {
padding-left: 10px;
text-decoration: none;
color: white;
font-weight: bold;
display: inline-block;
border-right: 50px solid transparent;
border-top: 50px solid #4c4c4c;
height: 0;
line-height: 50px;
} <h1 class="skew">HELLO WORLD</h1>https://jsfiddle.net/zo32q98n/
此时,文本显示在背景下方.如何使文本显示在棕色背景中？
5
推荐指数
推荐指数
2
解决办法
解决办法
135
查看次数
查看次数
CSS 网格：每隔一行的对齐方式不同
是否可以使用 CSS 网格将每隔一行向右对齐并每隔一行向左对齐？数量.item未知。
这是 HTML/CSS：
.container {
grid-template-columns: repeat(4, 1fr);
}<ul class="container">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<!-- ... -->
</ul>预期解决方案：
我也对 CSS 网格之外的其他解决方案持开放态度。
5
推荐指数
推荐指数
1
解决办法
解决办法
1209
查看次数
查看次数
单击时将圆形背景从一个元素切换或移动到另一个元素
每当我点击任何列表图标时,我想要将颜色从一个列表动画到另一个列表
.days-cal li {
color: #d5d1e6;
height: 36px;
width: 36px;
display: inline-block;
border-radius: 19px;
margin: 0 5px;
padding-top: 06px;
-webkit-transition: 0.5s linear;
-moz-transition: 0.5s linear;
-o-transition: 0.5s linear;
transition: 0.5s linear;
}
.days-cal li.active {
background: #4B916C;
text-align: center;
margin: 0px 0;
padding-top: 6px;
}<div class="expand-view inven-l">
<div class="item">
<ul class="days-cal">
<li ng-class="{'active':weekOf==1}" ng-click="weekSelect(1)">Sun</li>
<li ng-class="{'active':weekOf==2}" ng-click="weekSelect(2)">Mon</li>
<li ng-class="{'active':weekOf==3}" ng-click="weekSelect(3)">Tue</li>
<li ng-class="{'active':weekOf==4}" ng-click="weekSelect(4)">Wed</li>
<li ng-class="{'active':weekOf==5}" ng-click="weekSelect(5)">Thu</li>
<li ng-class="{'active':weekOf==6}" ng-click="weekSelect(6)">Fri</li>
<li ng-class="{'active':weekOf==7}" ng-click="weekSelect(7)">Sat</li>
</ul>
</div>
</div>4
推荐指数
推荐指数
1
解决办法
解决办法
178
查看次数
查看次数
无法通过滚动为 div 中的最后一个元素提供边距？
我有一个带有一些子 div 的 div，我用作选项卡，并且我的父 div 具有水平滚动（我将它用于移动视图，因此宽度较小）。像这样的东西：
.parent {
display: flex;
overflow-x: auto;
padding: 15px 0 20px;
}
.tab {
font-size: 15px;
text-transform: uppercase;
padding: 10px 40px;
color: #a4b5bf;
white-space: nowrap;
}<div class="parent">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
<div class="tab">Tab 4</div>
</div>问题是，当我想在最后一个元素上设置边距时，它不会从 div 的末尾移动。他得到了边距，你在检查器中看到它，但它只是不动。
4
推荐指数
推荐指数
1
解决办法
解决办法
1821
查看次数
查看次数
CSS 防止框阴影颜色渗色
我正在尝试使用延伸到彼此路径中的框阴影为两个相邻的 DIV 着色。由于某种原因，其中一个元素的框阴影会渗透到另一个 div 的顶部，从而产生丑陋的效果。
这是当前的效果： https: //i.stack.imgur.com/TOGYj.jpg 但我试图使它看起来像这样：https: //i.stack.imgur.com/uXHhl.jpg
我的代码如下，请记住预期的结果不是用 HTML/CSS 编码的，所以也许我想要完成的事情不可能用 CSS 实现。
span {
position: relative;
display: inline-block;
background: #fff;
width: 40px;
height: 20px;
margin-right: 7px;
border-radius: 1px;
}
span:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
span.red {
box-shadow: 0px 0px 30px 10px #ff0000;
}
span.blue {
box-shadow: 0px 0px 30px 10px #00ccff;
}<span class="red"></span>
<span class="blue"></span>4
推荐指数
推荐指数
1
解决办法
解决办法
678
查看次数
查看次数
如何制作悬停双三角？
像这样.所以'a'元素相互毗邻.随着工作的转变.你知道它是如何实现的吗？如果你至少给我一些链接我将非常高兴
3
推荐指数
推荐指数
2
解决办法
解决办法
89
查看次数
查看次数
标签 统计
css ×10
html ×7
css3 ×4
css-shapes ×3
css-grid ×2
flexbox ×2
border ×1
frontend ×1
html-table ×1
xhtml ×1