小编dip*_*pas的帖子
如何用背景颜色填充整个div
我正在尝试使用背景颜色来填充引导程序中子 div 中的整个 div，但我完全卡住了。我希望正确的部分是黄色的，但它只是突出显示了 div 中的文本。
这是一个小提琴。
我知道我错过了一些非常明显的东西，但是我如何让黄色填满整个col-lg-6div？
.new-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
.yellow {
background-color: yellow;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section id="new" class="new-section">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h1>Section left</h1>
</div>
<div class="col-lg-6 yellow">
<h1>Section right</h1>
</div>
</div>
</div>
</section>推荐指数
解决办法
查看次数
Flex在Firefox中无法正常工作
我有两个似乎与flex不配合的文本输入。
他们应该这样定位：
..但是定位如下：
的CSS
.container{
width: 48.1%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display:flex;
justify-content: space-between;
}
input[type=text] {
font-size: 18px;
padding: 8px;
font-family: 'lato';
font-weight: 300;
line-height: 20px;
transition: all linear .5s;
display: inline;
margin-top: 30px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #ddd;
}
#zip{
flex: .21;
}
#phone{
flex: .7;
}
对于flex:，我正在使用分数，以使它们的总和不等于1，并且彼此之间应留一点余量。不过这只是没有发生。
的HTML
<div class="container">
<input type="text" id="zip" name="zip" placeholder="Zip Code" maxlength="5" pattern=".{5,}" oninvalid="setCustomValidity('Please enter a 5-digit zip code')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return …推荐指数
解决办法
查看次数
如何获得除第一项之外的带有项目符号的列表
我有一个带有项目符号的无序列表，但我想要第一个li没有项目符号的列表，我不知道如何才能只有一个项目没有项目符号
<ul>
<li class="no_bullet"> item 0 </li>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
推荐指数
解决办法
查看次数
如何使用 SCSS 选择父级
我想在 SCSS 中写这样的东西：
.username {
color: red;
@something .mobile {
font-weight: bold
}
@something .desktop {
font-weight: normal
}
}
...在 CSS 中有以下输出：
.mobile .username {
color: red;
font-weight: bold
}
.desktop .username {
color: red;
font-weight: normal;
}
我怎样才能做到这一点？
推荐指数
解决办法
查看次数
如何使用bootstrap 5在移动设备中显示两列？
我正在使用 bootstrap 5。我必须在手机上显示 2 列，但它显示 1 列。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-6">
<h2>Heading one</h2>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-6">
<h2>Heading Two</h2>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-6">
<h2>Heading Three</h2>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-6">
<h2>Heading Four</h2>
</div>
</div>
</div>下面是浏览器的截图。
推荐指数
解决办法
查看次数
仅当属性不为 null 时才显示 React 组件
使用名称值查找 API 后，MyReactComponent返回一个超链接和一条消息。不过，我想仅当 name 不为空时才渲染此组件（包括进行 API 调用）。下面的内容能解决这个目的吗？还是我应该以不同的方式处理这个问题？
<dt hidden={null == name || '' === name.trim()}>
<MyReactComponent name={name || ' '} />
</dt>
推荐指数
解决办法
查看次数
Fontawesome 图标采用不同的宽度
我正在使用 Tailwind CSS 和 Font Awesome Icons。这里的图标显示如下，
是不是不适合调整每个div的宽度。这是我的代码（对于一个元素），
<!-- Navigation Link-->
<div class="w-100 p-3 hover:bg-white/30">
<div class="flex gap-4 text-white-max pl-3">
<div>
<i class="fas fa-tags"></i>
</div>
<div>Products</div>
</div>
</div>
<!-- End Navigation Link-->
我的问题是如何在不改变每个元素的情况下进行调整。
推荐指数
解决办法
查看次数
更改接下来的CSS元素
我想悬停在a.bio改变背景.pic为绿色.
我尝试了一些方法,但没有成功.
我不理解它的逻辑~ 以及如何使其工作.
码
.executivo .pic::after {
background-color: #00845b;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
transition: .3s ease-in-out;
}
.equipe a.bio:hover ~ .pic::after {
opacity: 0.35;
}
.executivo .pic {
margin-bottom: 45px;
position: relative;
}
.executivo .pic img {
display: block;
}<div class="executivo">
<div class="pic">
<img src="<?php echo $pic; ?>" alt="<?php echo $nome; ?>" />
</div>
<div class="title">
<h3><?php echo $nome; ?></h3>
</div>
<a class="bio" …推荐指数
解决办法
查看次数
:not()不会忽略带链接的列表项中的类
我试图用来:not()忽略.current第一个列表项中的类.
HTML:
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Page 2</a</li>
<li><a href="#">Page 3</a></li>
</ul>
CSS:
ul li a:not(.current){color:red}
我无法:not()忽视这.current门课.
我也尝试过:
ul li a:not(.current a){color:red}
推荐指数
解决办法
查看次数
IE11条件CSS注释不起作用
我尝试了几种条件格式,如在不同的网站中看到的,但似乎无法使其工作.浏览器版本是IE 11.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<link href="CSS/reset.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="CSS/font-awesome.css" rel="stylesheet" />
<!--[if !IE]><!--><link rel="stylesheet" type="text/css" href="CSS/login.css" /><!--<![endif]-->
<!--[if IE]><!--><link rel="stylesheet" type="text/css" href="CSS/loginIE.css" /><!--<![endif]-->
我已经改变了格式.删除Bootstrap和Fontawesome CSS但仍然无法正常工作.我甚至更改/删除了doctype和meta值,但没有任何效果.请帮忙.
html css internet-explorer conditional-comments internet-explorer-11
推荐指数
解决办法
查看次数
使用flexbox垂直对齐td元素中的元素
如何使表格数据td元素中的元素/文本垂直居中，填充其父表格行的整个高度tr？我认为 flexbox 是这里最好的方法。
这是我到目前为止尝试过的：https : //jsfiddle.net/3tr0cn4s/1/
推荐指数
解决办法
查看次数
为什么我的margin-top CSS在这种情况下不起作用？
我相信,我有这个问题是关系到margin不是崩溃在div那里面另一个div,但我可能是错的.
我希望有人可以在这方面把我推向正确的方向.
以下是我正在处理的页面中的一小段代码:
.space25 {
margin-bottom: 1.563em;
}
#menu {
text-align: center;
color: white;
margin-top: .9375em;
margin-bottom: .9375em;
}<div id="page-wrap">
<div id="header">
<div id="logo">
<img src="logohuge2.png" width="750px">
</div>
<div id="menu">
<h5><span class="btn">CURRENT WORK</span> <span class="btn-active">PRICING</span> <span class="btn">CONTACT</span></h5>
</div>
</div>
<div id="mediumtitle" class="25space">
Basic Packages</br>
</br>
</div>
</div>推荐指数
解决办法
查看次数
这个简单的代码不会运行
它在第一眼看起来非常简单,但变量不会将字符串作为文本我猜,我不知道为什么？我正在使用记事本++
var cnextimage = "C:\Users\disley\Desktop\My Website\image\" ;
document.write(cnextimage);推荐指数
解决办法
查看次数
标签 统计
css ×10
html ×9
css3 ×3
javascript ×2
bootstrap-5 ×1
firefox ×1
flexbox ×1
font-awesome ×1
html-lists ×1
html-table ×1
margin ×1
pseudo-class ×1
react-hooks ×1
reactjs ×1
sass ×1
scss-mixins ×1
tailwind-css ×1