小编thi*_*dot的帖子

我有两个内联的div.它们都有相似的风格,重要的是它们都是内联的.

JQuery报告称他们的css"display"仅在chrome中被阻止.我真的需要知道这两个是内联的.

jsfiddle 在这里

CSS:

div
{
    display: inline;
    width: 50%;
    float: left;
    height: 100px;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    box-sizing: border-box;
}
.div1
{
    background-color: black;
    color: white;
    border: 2px solid grey;
}

.div2
{
    background-color: white;
    color: black;
    border: 2px solid black;
}

HTML:

<div class="div1">1</div>
<div class="div2">2</div>

jQuery的:

jQuery("div").click(function()
{
    jQuery(this).append("<br/><span>" + jQuery(this).css("display") + "</span>");
});

jQuery("div").click();

有谁知道发生了什么,或者更重要的是我能做些什么？(除了拉我的头发......它开始受伤;))

如果我有一个无序列表,例如

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">About</a></li>
    <li><a href="index.html">Service</a></li>
    <li><a href="index.html">Blog</a></li>
</ul>

使用CSS很好地对齐它们,例如

ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul li {
    float: left;
    line-height: 50px;
    margin-left: 5px;
    margin-right: 5px;
}
ul li a {
    display: block;
    height: 46px;
    padding-left: 5px;
    padding-right: 5px;
}

然后我如何将<ul>元素与页面中心对齐,请记住没有为任何元素指定宽度？

首选答案将与ie6 +兼容

任何帮助赞赏.

贾伊

有人可以帮我解决这个问题吗？问题仅出在兼容模式下的IE中.我有位置绝对和z-index 99999999的菜单,但仍然隐藏菜单内容.请检查 :

http://www.tomasdostal.com/projects/modul16/draft2/?page=buildings

谢谢你的建议

我正在尝试理解我在看到这里可以看到的一些HTML代码时看到的行为.

您会注意到,如果您更改以下内容:

<div style="border: solid 1px black;">
    <div style="margin-top:50px;">
        Post Title
    </div>
</div>

对此(即"border:solid 1px black;"到"border:solid 0px black;"):

<div style="border: solid 0px black;">
    <div style="margin-top:50px;">
        Post Title
    </div>
</div>

内部div的边距不再影响外部div.我一直试图找到定义这种行为的W3.org规范,但没有运气.有人想帮忙吗？

我发现了关于水平和垂直居中图像的问题.但它没有用.我的代码是

#parent {
    position : relative;
    float : left;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
}


#parent img {
    max-height :400px;
    max-width : 700px;
}

图像的高度和宽度是动态的.

我在导航抽屉中使用了自定义菜单。我只想减少菜单项的左边距，然后将图像视图稍微靠近边距（向左）。我已经更改了尺寸，以减小底部边距并移动图像视图和文本视图。

<!-- Override the private variables in navigation drawer-->
    <dimen name="design_navigation_icon_size">45dp</dimen>
    <dimen name="design_navigation_icon_padding">5dp</dimen>
    <dimen name="design_navigation_separator_vertical_padding">0dp</dimen>
    <dimen name="design_navigation_seperator_left_margin">0dp</dimen>

我只想减少图像的16dp空间。是否有任何尺寸变量可以覆盖以执行此操作？

NavigatonView：

<android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:itemIconTint="@null"
        app:menu="@menu/activity_main_drawer"
        app:itemTextAppearance="@style/NavigationDrawerStyle">

我已经添加了

tools:override="true"

在DrawerLayout中。

menu_drawer看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:id="@+id/grp1" android:checkableBehavior="single">
        <item
            android:id="@+id/navigation_item_1"
            android:icon="@drawable/menu_home_unselected"
            android:title="Home" />
    </group>

    <group android:id="@+id/grp2" android:checkableBehavior="single" >
        <item
            android:id="@+id/navigation_item_2"
            android:icon="@drawable/menu_identify"
            android:title="Identity" />
    </group>

    <group android:id="@+id/grp3" android:checkableBehavior="single" >
        <item
            android:id="@+id/navigation_item_3"
            android:icon="@drawable/menu_self_disclosure"
            android:title="Disclosure" />
    </group>
</menu>

看起来我在谷歌浏览器中的样式并不像我想要的那样(链接).它在Internet Explorer 8上运行正常.

这是样式表:

@charset "utf-8";
/* Stylesheet for Northview Game Tickets */

#mainwrapper {
    width:18cm;
    height:25cm;
    background-color:#0F0;
}

#title {
    width:680px;
    height:117px;
    /*background-image:url(http://nhswag.com/tickets/images/title.png);*/
    background-color:#183f61;
}

#title-img {
    width:680px;
    height:117px;
}

#sportimage {
    width:680px;
    height:302px;
    background-image:url(http://nhswag.com/tickets/images/sportimg.png);
}

#instructionstitle {
    width:340px;
    height:57px;
    float:left;
    padding-top:15px;
    /*background-color:#353435;*/
    background-color:#183f61;
    vertical-align:text-bottom;
    color:#FFFFFF;
}

#instructions {
    width:340px;
    height:416px;
    float:left;
    text-align:left;
    padding-top:15px;
    /*background-color:#8B8B8B;*/
    /*background-color:#003;*/
    background-color:#F2EEEA;
}

#ticketinfo {
    width:170px;
    height:189px;
    float:right;
    text-align:left;
    padding-top: 15px;
    padding-left: 15px;
    /*background-color:#767676;*//*#633;*/
    background-color:#d9d5d2;
}

#barcodewrapper {
    width:170px;
    height:189px;
    float:right;
    padding-top:44px; …

您好，我正在尝试使用一些处理显示和表单提交的jQuery来制作一个CSS下拉列表。我正在努力做的一件事就是做到这一点，这样下拉列表就不会将其他元素推倒。欢迎任何其他建议，这是我的代码（我知道根本不应该使用表，而必须在旧版UI中使用它，所以请耐心等待）

<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js">   </script>
    <style>
        *{padding:0;margin:0;}
        span.icon{
            display:inline;
            height:15px;
            width:15px;
        }
        span.icon.left{
            float:left;
            padding-left:5px;
        }
        span.icon.right{
            float:right;
            padding-right:5px;
        }
        div.dropDown{
            height:20px;
            width:200px;
            margin:10px;
            padding:2px 0;
            cursor:pointer;
            border:1px solid #ccc;
            border-radius:3px;
            -webkit-border-radius:3px;
            -moz-border-radius:3px;
            background-color:#f5f5f5;
            background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(230,230,230)),
                color-stop(0.84, rgb(255,255,255))
            );
            background-image: -moz-linear-gradient(
                center bottom,
                rgb(230,230,230) 0%,
                rgb(255,255,255) 84%
            );
        }
        div.dropDown:hover{
            border:1px solid #777;
            background-color:#eee;
            background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(255,255,255)),
                color-stop(0.84, rgb(230,230,230))
            );
            background-image: -moz-linear-gradient(
                center bottom, …

我正在使用这个CSS代码

#main ul li {
  list-style-type: disc;       
  list-style-position: inside; 
} 

用于显示列表项.

问题是如果列表项扩展到更多行,则新行不会缩进.我的列表渲染了点下方的文本,我希望它呈现缩进.

我的应用程序中有一个侧边栏,可以通过切换按钮隐藏/显示.它只是在"body"上切换一个类,为内容区域添加一些边距并隐藏/显示侧边栏.麻烦的是,内容区域在切换时不会调整其子内容的大小.一旦我调整了浏览器的大小,内容区域就会调整以适应内容,但我需要它在切换后执行此操作而无需调整窗口大小.有没有办法触发元素大小刷新或dom刷新来解决这个问题？使用Chrome 19.x.

 $('#sidebar-toggle').click(function(event) {
   event.preventDefault();
   $('body').toggleClass('with-sidebar-left');
 });

编辑:似乎它可能是一个Webkit问题.在Firefox中正常工作.

编辑2:在以下位置设置简化的构建:

https://dl.dropbox.com/u/189605/misc/build-test/grid.html

您可以看到这些框是浮动的:左侧,当您使用小箭头按钮最小化侧边栏时,它应该调整右侧以使更多的框适合.在Webkit中,您必须调整浏览器的大小才能实现它的更多空间.适用于Firefox.