小编chi*_*rag的帖子
Youtube 视频 100% 宽度和自定义高度
我在我的网站上想添加一个宽度为 100%，高度为 400px 的视频；我尝试了以下方法：
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 400px;
}<div class="container">
<iframe class="video" src="//www.youtube.com/embed/yCOY82UdFrw" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen">
</iframe>
</div>但我的视频结果是这样的： 请点击我
内部不是100％。
有没有人知道如何解决这个问题？我会很感激。
谢谢，
凯文
3
推荐指数
推荐指数
1
解决办法
解决办法
9309
查看次数
查看次数
浮动离开跨度和div一起不按我想要的方式工作
所以我正在制作一个即将推出的模板,我试图通过我的代码到达的是这张照片.
但我在我的代码中得到的是这个
我的HTML代码和CSS代码如下:
.days {
font-size: 180px;
font-family: "Oswald";
color: #fff;
font-weight: 500;
text-transform: uppercase;
float: left;
}
.smalltext {
font-size: 25px;
font-family: "Oswald";
letter-spacing: 10px;
color: #fff;
text-transform: uppercase;
float: left;
}<ul id="clockdiv">
<li>
<div class="smalltext">Days</div>
<span class="days"></span>
</li>
</ul>问题是我怎样才能像设计一样将它们漂浮到左边？
2
推荐指数
推荐指数
1
解决办法
解决办法
215
查看次数
查看次数
滚动后更改颜色导航栏
我想滚动时改变导航栏的颜色.当导航栏位于顶部时,背景是透明的.感谢大家的关注,请原谅我糟糕的英语!
/* COLORE NAVBAR */
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
box-shadow: 1px 1px #000;
}
.navbar-toggle {
background-color: transparent;
border: none;
}
.navbar-toggle:hover {
background-color: transparent! important;
}
.navbar-toggle:focus {
background-color: transparent! important;
}
.navbar-default {
background-color: transparent;
border-color: transparent;
}
.navbar-default .navbar-nav>li>a {
color: #FFF;
text-shadow: 1px 1px #000;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: red;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
background-color: yellow;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
background-color: blue;
} …2
推荐指数
推荐指数
1
解决办法
解决办法
4661
查看次数
查看次数
如何将这两个div放在一行中
doc.html
.column {
background-color: orange;
width: 75%;
vertical-align: top;
display: inline-block;
height: 200px;
}
.nav {
vertical-align: top;
display: inline-block;
width: 25%;
background-color: lightgreen;
height: 200px;
}
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}<!DOCTYPE html>
<html>
<head>
<link href="css2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container elem">
<div class="nav"></div>
<div class="elem column"></div>
</div>
</body>
</html>我根据本指南learnlayout写了doc.html和css2.css.但页面看起来像这样.如何将这两个部分组成一行？
2
推荐指数
推荐指数
1
解决办法
解决办法
555
查看次数
查看次数
使用另一个函数禁用一个函数 - Vanilla JS
我想知道如何用另一个功能禁用一个功能。我有一个要求额外课程作业的表格，但如果用户尚未完成任何额外作业，则会隐藏输入。我想设置一个故障保护装置，以防他们删除一组输入并改变主意。
我需要帮助的是编写故障安全函数来检查：如果函数 1 发生，则禁用它。
代码笔： http: //codepen.io/theodore_steiner/pen/ORzpQQ
function hideCourseWork() {
var otherEducationHistory = document.getElementById("otherEducationHistory");
otherEducationHistory.style.display = "none";
if (otherEducationHistory.style.display == "none") {
var noAdditionalCourseWork = document.getElementById("noAdditionalCourseWork");
var checkNo = document.getElementById("checkNo");
var undo = document.getElementById("undoNoAdditionalCourseWork");
noAdditionalCourseWork.style.top = "-48px";
checkNo.style.top = "-65px";
undo.style.top = "-65px";
undo.style.top = "-63px";
}
};<div class="input-group" id="other-education">
<p class="subtitleDirection">Please list in chronological order, any additional cources beyond the degree(s) listed above, including any Ministry of Education Courses. If you have not completed any additional course work, …2
推荐指数
推荐指数
1
解决办法
解决办法
5043
查看次数
查看次数
如何在 Angular 10 中使用异步管道检索数据后执行一些操作
我使用异步管道来绑定数据，如下所示：（Angular 10）
应用程序组件.html：
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody *ngFor="let customer of customers | async">
<tr>
<td>{{customer.id}}</td>
<td>{{customer.name}}</td>
</tr>
</tbody>
</table>
应用程序组件.ts：
constructor(private customersService: CustomersService) { }
customers:Observable<any>;
ngOnInit() {
this.customers = this.customersService.getCustomers();
}
这里我调用 getCustomers() 方法，该方法通过 http GET 方法从 api 获取数据并分配给 customer observable。
它工作正常。我想在从 api 检索数据后执行一些操作。
那么如何使用异步管道来实现这一点呢？
2
推荐指数
推荐指数
1
解决办法
解决办法
1799
查看次数
查看次数
CSS如何居中::伪元素之后
我无法集中::afterCSS伪元素.主要元素是图像:
- 图像应位于页面的中心
::after显示图像标题的伪元素应该叠加在图像的中心.
这是我有的:
#frame {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: black;
&: after {
content: 'Caption overlay';
color: white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}<div id="frame">
<svg width="200" height="200">...</svg>
</div>图像框在页面上正确居中,但其标题不在图像上居中.相反,它位于右下角.
1
推荐指数
推荐指数
1
解决办法
解决办法
1335
查看次数
查看次数
Bootstrap 3 Dropdown全宽
使用Bootstrap 3，我正在处理的站点具有几个导航栏，一个带有主页，注册等的顶部，另一个带有搜索栏选项，然后是另一个主要类别（navbar3），它们是下拉菜单。问题出在navbar3。我需要下拉菜单占用视图宽度的整个宽度，但不能超过980px。现在，单击下拉菜单时，弹出窗口以其受尊敬的col-xs-2从其父div的开头开始。我需要弹出控件从该行的开头开始（就像鞋类当前正在做的那样），并将整个宽度扩展到980px。因此，如果您单击服装，我希望该下拉菜单在鞋类下拉菜单开始的同一点开始。我已经排除了一些对解决方案没有影响的css。而且品牌没有弹出式广告
#backgroundcategory {
margin: 0 auto;
height: 37px;
}
.maxwidth {
max-width: 980px;
}
.categorydropadjust {
width: 20%;
}
.categoryheaders {
padding-left: 0;
margin: 0 auto;
font-weight: 700;
font-size: 20px;
height: 37px;
}
.vcenter {
display: flex;
align-items: center;
}
.centercat {
margin: 0 auto;
}
.dropdowncat:hover {
cursor: pointer;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="backgroundcategory">
<div class="container-fluid maxwidth">
<div class="row">
<div class="col-xs-2 categorydropadjust">
<div class="dropdown dropdowncat">
<div class="dropdown-toggle categoryheaders vcenter" id="footwear" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> …1
推荐指数
推荐指数
1
解决办法
解决办法
7003
查看次数
查看次数
css - 如果行数不同则阻止失控
.inDB {
background-color: #53354A;
color: #53354A;
padding: 2% 3%;
height: 100px;
width: 130px;
}<div id="section-one-content">
<ul id="gt" class="meta_data">
<h2 style="color:#859900; padding:30px">No Meta Data</h2>
<li><button class="inDB"></button></li>
<li><button class="inDB"></button></li>
<li><button class="inDB"></button></li>
</ul>
</div>
您可以看到第一个按钮略高于其他2.因为它只有1行作为文本内容
如何解决问题并使所有问题都在同一行.
1
推荐指数
推荐指数
1
解决办法
解决办法
57
查看次数
查看次数
Angular 9：带有数字管和区域设置“en-IN”的印度数字格式？
我在 Angular 9 中有这样的代码：
主要.ts
import { LOCALE_ID } from '@angular/core';
platformBrowserDynamic().bootstrapModule(AppModule,{
providers: [{provide: LOCALE_ID, useValue: 'en-IN' }]
})
测试.component.html
{{total | number:'1.2-2':'en-IN'}}
测试组件.ts
total = 155000;
我正在使用带有区域设置“en-IN”的数字管道。
我想要这样的结果：1,55,000
但我变得这样：155,000
我想要印度数字格式的结果，仅包含区域设置和数字管道。
如何使用数字管道和区域设置“en-IN”来实现此目的？
1
推荐指数
推荐指数
1
解决办法
解决办法
1314
查看次数
查看次数
CSS背景gif图像不循环重复
CSS背景gif图像没有循环重复.我有以下代码,但它不起作用.两个图像都呈现在另一个图像的顶部,但是gif文件没有循环.
.decoration {
display: inline-block;
width: 365px;
height: 650px;
margin-top: -10px;
background: url("https://placeholdit.imgix.net/~text?txtsize=34&txt=365%C3%97650&w=365&h=650") no-repeat center;
background-size: cover;
vertical-align: top;
background-position: center center;
}
image-holder {
width: 269px;
height: 477px;
margin: 77px 48px;
background: url("http://bbsimg.ngfiles.com/1/24309000/ngbbs509571c17019a.gif") repeat center;
background-position: center center;
background-size: cover;
}<div class="decoration">
<div class="image-holder">
</div>
</div>0
推荐指数
推荐指数
1
解决办法
解决办法
1765
查看次数
查看次数
Javascript:在指定div中阻止空格键滚动
我在div里面有一个textarea.textarea比div高,但不能垂直滚动.相反,div垂直滚动.但是,当我通过javascript和blur()所有这些禁用textarea时,空格键击仍会影响div作为向下滚动页面.我尝试了很多方法来摆脱这个但没有运气.这是我的代码:
#container {
overflow-y: scroll;
overflow-x: hidden;
float: left;
white-space: nowrap;
height: 200px;
}
textarea {
resize: none;
overflow-y: hidden;
overflow-x: scroll;
word-wrap: off;
height: 1000px;
}<div id="container">
<textarea>{...}</textarea>
</div>当行数增加时,textarea的高度实际上是由javascript自动调整的.所以这不是一个静态数字.这是否有任何方法可以防止父div响应空格键事件？谢谢!
0
推荐指数
推荐指数
1
解决办法
解决办法
1204
查看次数
查看次数
标签 统计
css ×10
html ×10
javascript ×3
angular ×2
asynchronous ×1
css3 ×1
html5 ×1
iframe ×1
observable ×1
rxjs ×1
youtube ×1