标签: css

如何将文本水平和垂直居中？我不想使用绝对位置因为我尝试使用它而我的其他div变得更糟.还有另一种方法吗？

div {
    height: 400px;
    width: 800px;
    background: red;
}

<div>
    <h1>This is title</h1>
</div>
    

最近我点了一篇关于CSS z-index属性的有趣文章.我发现它是因为我正在寻找一个答案,为什么来自前一个div的溢出文本显示在后面div的背景上方但不在下面div中的span的背景之上,就像这里(jsfiddle):

#overflowed {
  background-color: green;
  width: 300px;
  height: 100px;
}
#non-floated {
  background-color: pink;
  width: 300px;
}
#non-floated span {
  background-color: yellow;
}

对此的解释是浏览器以特定顺序绘制元素,这是基于所谓的堆叠顺序:

因此,对于布局中的根元素和每个定位元素,浏览器创建这样的堆叠顺序,然后绘制所有这些订单,对不起双关语,相应的顺序.

所以这就是内联元素和文本(创建内联框的那些)被绘制在块级元素之上的原因,即使这些块元素稍后出现在文档中,就像我上面的jsfiddle一样.

所以问题本身.

我仍然无法找到答案为什么这些内联框,如果它们被创建,内联元素和浮动元素内的文本不是根据上面的堆叠顺序的方案与浮动元素之外的其他内联框绘制,就像这里(jsfiddle):

#overflowed {
  background-color: green;
  width: 300px;
  height: 100px;
}
#floated {
  background-color: pink;
  width: 300px;
  float: left;
}
#floated span {
  background-color: yellow;
}

在这里你可以清楚地看到,文档中第一个div的文本(未浮动)是在span的黄色背景上方(之后)绘制的,而span是内联元素,并且根据上面的堆叠顺序的图像应该在浮动容器(其背景和边框)之后绘制.

那么有人对此有一个可靠的解释吗？我认为浮动元素可以创建类似于自己的堆叠顺序的东西,就像定位元素那样,但我还没有在网上找到任何提及.

考虑这个HTML

<div class="parent">
    <a href="#">Parent</a>
    <div class="child">
        <a href="#">Child</a>
    </div>
</div>

我想要做的是将顶部child置于底部parent.

到目前为止这是我的CSS:

.parent {
    position: relative;
}

.child {
    position: absolute;
    left: 0;
    bottom: 0;
}

这实现了这个:

我想要实现的是:

请注意:我不知道父容器或子容器的高度,也不想设置任意高度,我也不想恢复使用JavaScript.

我的导航栏中有一个引导下拉列表,显示了一个通知列表.这是非常标准的代码,但我设置max-height: 300px;和overflow-y: scroll;开启ul元素.在Chrome或Firefox的Mac上查看时,在高度达到> 300px并且ul溢出滚动之前,没有滚动条.但是在Windows(Chrome或IE)上,垂直滚动条始终存在,这真的很烦人.有没有办法关闭Windows上的滚动条或隐藏它直到它实际需要？

以下是下拉列表的代码:

<li class="dropdown notifier">
    <div class="dropdown-toggle" style="width:initial;">
        <div class="dropdown-link nav-dropdown-link" id="dropdownMenuNotifications" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa" ng-class="unreadNotices > 0 ? 'fa-bell-o red' : 'fa-bell-o'" style="position:absolute;right:5px;"></i>&nbsp;
            <div class="counter" ng-if="unreadNotices > 0">{{unreadNotices}}</div>
        </div>
        <ul class="dropdown-items dropdown-menu account" aria-labelledby="dropdownMenuNotifications">
            <li>
                <a href="#" class="title"><span>Notifications</span></a>
            </li>
            <li ng-if="notices.length === 0">
                <a href="#" style="cursor:default;">
                    <div class="notice-text">
                        <span>No notifications at the moment</span>
                    </div>
                </a>
            </li>
            <li ng-repeat-start="n in notices" ng-if="!n.read">
                <a href="#" class="unread" ng-if="n.action" ng-click="markRead(n, …

如果在文本字段中输入字符并且当前应用的字体不支持该字符,则会为该字符使用备份字体.是否有可能通过Javascript或其他方式判断何时发生这种情况？尝试创建一个脚本,如果字体不支持某个字符,则会提醒用户.谢谢你的帮助!

我在用户点击输入框时添加了下面的代码来选择全文:

<input type="number" onclick="this.setSelectionRange(0, this.value.length)" name="quantity" />

但我收到以下错误:

未捕获的InvalidStateError:无法在'HTMLInputElement'上执行'setSelectionRange':输入元素的类型('number')不支持选择.

我想创建一个可折叠的navbar.一切正常,但nav物品不会像它应该的那样堆叠在一起.它们彼此水平相邻.

码:

<nav class="navbar navbar-light bg-faded" role="navigation">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsing-navbar">
        &#9776;
    </button>

    <div class="collapse navbar-toggleable-xs" id="collapsing-navbar">   
        <a class="navbar-brand" href="/">Logo</a>

        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a href="/messages" class="nav-link">Messages</a>
            </li>

            <li class="nav-item">
                <a href="/logout" class="nav-link">Logout</a>
            </li>
        </ul>
    </div>
</nav>

截图:

我有以下代码来打印弹出窗口的内容:

var frame = this._urlElement;
if (frame) {
    var content = frame.contentWindow.document.getElementById("content");
    if (content) {
        MarvalSoftware.UI.Dom.setStyles(content, { 'overflow': 'visible' });
    }
    frame.contentWindow.focus();
    frame.contentWindow.print();
}

_urlElementiframe 在哪里,其内容是doc overflow: auto.当我在IE11中打印到PDF时,我只看到第一页,内容没有干净地切断,打印的PDF上也没有可见的滚动条.如果我尝试打印预览,甚至在iframe内部,我会看到整个页面都有弹出窗口的轮廓.

我试图从Iframe打印的页面有一个母版页,带有contentdiv overflow: auto.当我这样打印,Chrome和IE时,我在打印输出上看到一个滚动条,打印输出只有一页,因此在我的页面样式表中,我用一个用于打印的媒体查询覆盖该溢出规则overflow: visible.然后,当我在Chrome上打印时,滚动条消失,打印输出为两页.在IE中,滚动条也消失了,但在打印页面1的末尾,打印输出被毫不客气地切断.

当我修改我的打印代码以创建新的IFrame,并将其插入要打印的文档时,将样式表和正文复制到新的iframe,并打印新的iframe,然后即使在IE上,也会打印完整的文档.也就是说,新的iframe不包含在母版页的任何元素中,因此,我可以查找的母版页中是否有任何其他样式可能会导致这种情况,除此之外overflow？

顺便说一下,当我使用Windows自己的"PDF打印机"打印到PDF时,我似乎只会遇到这种情况.

我有一个带有以下标记的表:

<div class="table-responsive"
    <table class="table table-hover"
        <!-- table data-->
    </table>
</div>

正如文档所说,我的表现在应该能够水平滚动.如果我使用chrome的设备模拟器,它确实有效.然而,当我尝试使用真正的iPhone(在这种情况下为iPhone 5s - 在iPhone 6上测试过)时,我根本无法水平滚动表格.我可以看到默认情况下在视口中显示的最后一列,我只是无法侧向滚动它.我在我的iPhone上使用chrome和safari尝试了这一点,并且得到了同样的行为.

我试图做的是添加-webkit-overflow-scroll: touch但它没有解决问题.我也尝试手动添加overflow-x: scroll而不是默认auto但无济于事.

我不确定这是否重要,但我也有一个引导插件 - offcanvas - 由jasny bootstrap,我不能在我的iPhone上垂直滚动那个侧面菜单.这一切都在仿真器中工作,但在真实的东西上失败了.

也许那两个人以某种方式相连.

任何帮助表示赞赏.

编辑:

我刚刚在Android手机上测试过,看起来我可以按预期水平滚动表格.但是,即使在android上,我仍然无法垂直滚动侧面菜单.我想这意味着这些问题并没有相互联系.

几个星期以来我到处寻找这个,我根本无法找到一些东西来告诉我我做错了什么或者如何进行.目标是创建一个类似于亚马逊放大鼠标悬停的功能,用于具有小图像的产品.

我目前不知道如何继续,但我知道我将需要两个图像 - 一个在"放大"尺寸,一个在"缩小"尺寸.我没有使用Jquery - 我无法通过我的雇主的要求将它或任何插件安装到网站上.我基本上要求更难回答,我提前为此道歉.我必须从适度的划痕中做到这一点.警告:我是一名编程学生.想拿就拿吧.

我有HTML和CSS脚本,因为我们实际上没有IDE在这里我在codecademy的项目部分这样做,否则我必须完全实时编程.你可以在这里找到我的代码,但我也会在下面发布代码,因为该链接必然会有更改代码,因为它使用了程序保存.

注意:我原来是这样的,所以灰色的盒子跟着我的鼠标在相对中心.它移动时闪烁,但它正在工作.目前虽然决定不去,至少在我的工作电脑上.我没有在我的个人电脑上测试它.

编辑:代码正在我的Surface Pro 3上工作,虽然它确实跟随图像的鼠标(这是暂时的,我抓住了一些随机的东西).我不确定为什么代码不能在我的工作计算机上工作,尽管它可能是因为它是Macintosh OSX版本10.6.8 ...

HTML代码:

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
</head>
<body>

<img id="imgZoom" onmousemove="zoomIn()" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg">
<div id="overlay" onmousemove="zoomIn()"></div>
</body>
</html>

CSS代码:

#imgZoom {
    height: 300;
}

#overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width:20%;
    height:20%;
    padding: 25px;
    border: 5px solid gray;
    background-color: white;
    opacity:0.4;
    text-align:center;
    z-index: 1000;
}

Javascript代码:

function zoomIn()
{
    var element …