小编Alv*_*dez的帖子

我无法相信我无法找到任何有关此问题的信息.

在我的新项目中,未来的用户将有一个列有一些input type="number",并作为数字字段(没有text一个)我希望数字对齐右边.

我发现这些数字太靠近箭头了,所以从逻辑上讲,我给它们添加了一个padding-right.

令我惊讶的是,我似乎无法将数字与箭头分开.padding-right沿着数字移动箭头.

基本上只能Opera做padding正确的方式.但是到目前为止我没有测试过其他主要的3个浏览器,如下图所示.

所以.有没有办法将数字与箭头分开,所以它至少在Firefox和Chrome(我们建议我们的网络应用程序的这两个浏览器？)

一个带有简单示例的JSFIDDLE

我的项目中有一些动态生成的模块.这个基本的HTML将作为我想要实现的目标的一个例子:

<div class="container">
    <div class="image">  
        image here
    </div>
    <div class=" ellipsis">                            
        <div class="description">
            here we have a text not very long for a small module
        </div> 
    </div>
    <div class="end">
        buttom
    </div>                                              
</div>

我的问题是,我不希望这个模块在垂直方向上增长过多,如果网络管理员写了一个很长的"描述"(我不能限制他想写多少,因为"描述"文本会显示在其他页).

我发现了一个很好的CSS技巧,可以将"省略号"添加到多行容器中.在这里你可以看到这个"技巧" .ellipsis(加上基本的CSS):

.container {
    background-color: #eee;
    width:100px;
    margin:20px;
    float:left;    
}
.image {
    border:2px solid #999;
    width:100px;
    height:60px;
    background-color: #fff;
    margin-bottom:10px;
}
.end {
    border:2px solid #999;
    width:100px;    
    background-color: #fff;
}

.ellipsis {
    overflow: hidden;
    max-height: 200px;
    line-height: 25px;
    margin-bottom:10px; 
    position:relative;
}

.ellipsis:before {
    content:"";
    float: left; …

基本上我需要一个菜单​​汉堡,可以打开和关闭整页菜单,但我无法让编码一起工作.

所以我创建了菜单汉堡动画切换和单页菜单分别工作正常,现在我不知道如何将它们放在一起,我已经尝试了很长时间但似乎无法使其工作,任何人都可以帮忙吗？

以下是代码的链接:

1.菜单汉堡FIDDLE

CSS:

body {
    padding: 0px;
}

.border {
    position: fixed;
    background: #f9f8f3;
}

.top, .bottom {
    left: 0;
    right: 0;
    height: 50px;
}

.top {
    top: 0;
}

.bottom {
    bottom: 0;
}

.right, .left {
    top: 0;
    bottom: 0;
    width: 50px;
}

.right {
    right: 0;
}

.left {
    left: 0;
}

/* End of -->> Body border */


/* Nav */

.c-hamburger {
  display: block;
  position: fixed;
  left: 0px;
  bottom: 0px;
  overflow: hidden;
  margin: …

我在用.class > ul > li.

基本上我想知道为什么有些属性按预期工作(如border)但其他属性text-transform,color或font-size影响列表中的列表.

这是一个例子:FIDDLE

我发现真的很烦人,需要使用.class ul li ul li"撤消"我想要的第一个直接<li>孩子的文本样式.

任何能够让我了解这个选择器如何真正起作用的文档链接都会受到极大的影响.

在我的项目中,我正在fullpage.js主页中使用.

然后我想添加一个视频作为背景,但视频忽略了该autoplay选项,它无法启动.但是当你向下滚动一次然后向上滚动时它会发生.

它在firefox上工作正常(甚至在IE上!).

您可以在此codepen上看到此行为

chrome版本:60.0.3112.113(Build oficial)(64位)

我可以添加到我的代码中以使其有效,至少暂时如何？

非常感谢.

我一直在研究一个需要HTML5拖放的项目,而且我遇到的东西可能很容易实现,但我似乎无法找到解决方案.

基本上我有一些可拖动的元素和一些下降区域.由于使用一个工作示例更容易解释,我已经制作了这个简单的JSFIDDLE

现在您可以将任何元素拖动到任何拖放区域或根据需要将它们移出,但我想要实现的是让橙色框放在任何绿色区域中(并忽略蓝色区域......)如果你将它放在那里,它会移回原来的位置)红色的盒子必须放入蓝色的盒子里(忽略绿色的盒子).

任何人都可以帮助我或提示我一个解决这个问题的方法吗？

    function DragOver(ev) {
      ev.preventDefault();
    }

    function Drag(ev) {
      ev.dataTransfer.setData("text", ev.target.id);
    }

    function Drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data));
    }


    var elemens = document.querySelectorAll('.draggable');
    [].forEach.call(elemens, function(elem) {
      elem.addEventListener('dragover', DragOver, false);
      elem.addEventListener('drop', Drop, false);
    });

   #divContenedor {
     width: 950px;
     height: 500px;
   }
   
   #div1,
   #div2,
   #div3 {
     width: 350px;
     height: 70px;
     border: 1px solid #aaaaaa;
     background-color: green;
   }
   
   #div4 {
     width: 350px;
     height: 70px;
     border: 1px solid #aaaaaa;
     background-color: blue;
   }

<p>
  Drag&drop testing</p> …