标签: css-float

我有一个field_wrapper类div,它包含3个子divs field_label,field_input和field_error

我需要将field_label,field_input并排放在前两个下面的field_error中.

请看下面的css代码,知道我是如何实现这一点的,我的问题是它在IE7中不起作用.清除两者应用于field_error不起作用.

即使经过谷歌搜索很长一段时间,我也找不到合适的方法来解决这个问题而不添加HTML标记.请提示css技巧或任何其他方法以避免额外的标记代码

.field_wrapper
{
 clear:both;
}

.field_label
{
 float:left;
 width:40%;
}
.field_input
{
 float:left;
 width:40%;
}
.field_error
{
 clear: both;
 color:#FF0000;
 float: right;
 text-align:left;
 width: 60%;
}

<form method="post" action="http://localhost/locations/add">
 <div class="field_wrapper">
  <div class="field_label">
   <label for="location_add_name">Name</label>
  </div>
  <div class="field_input">
   <input type="text" id="location_add_name" value="" name="name">
  </div>
  <div class="field_error">
   <p>The Name field is required.</p>
  </div>
 </div>
 <div class="field_wrapper">
  <div class="field_label">
   Address
  </div>
  <div class="field_input">
   <textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
  </div>
  <div class="field_error">
  </div>
 </div>
 <div class="form_submit">
  <input type="submit" value="Add" …

我几乎没有float:right在我的CSS中使用,现在我做了,并遇到了一个恼人的问题.我将菜单项浮动到右侧

我的HTMl

    <ul id="extMenu">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Feedback</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>

我的CSS

    #extMenuBlock {
    }
        #extMenuBlock ul#extMenu { 
            list-style:none;
            padding:0;
            margin:0; 
        }
        #extMenuBlock ul#extMenu li { 
            float:right;
            padding:5px; 
        }

Now when the items are float, I receive my menu is this order Contact Feedback Home, but I want them in opposite order ie Home Feedback Contact

<style>
.header {
    float:left;
    width:50%;
    border:1px solid black;
}
</style>

<div style="width:100%;">
    <div class="header">Hello</div>
    <div class="header">World</div> 
</div>

我希望两个内部div在彼此旁边出现,完全适合父母.当没有设置边框时会发生这种情况,但是当我设置边框时,第二个div会换行并显示在下面.我该如何避免？

我对块元素上的背景图像有一个小问题,前面是浮动元素.

我将图像向左浮动,然后是a H1.正如所料,H1(这是一个blocl级元素)在图像后面流动,但它的内容(实际标题)出现在图像的右侧.

不幸的是,我正在使用的背景图像H1必须与左边对齐,因此出现在实际后面img,因为与内容不同,它不会被浮动行为推动.

例:

http://jsfiddle.net/WwuqG/

(我将第二个标题设置clear: left为显示它应该是什么样子).

一种解决方案是将标题的左边距设置为略大于浮动图像的宽度,但这需要我事先知道它的宽度.

另一种选择是在其中的元素中添加标题的图标h1,但这在语义上并不正确.

是否有更好的仅css解决方案,不需要额外的元素？

我有DIV div.home-top与其他两个div div#home-content作为float:left和div#home-buttons作为float:right.

和下面的div#home-top得到了div#home-footer作为clear:both

我div#home-top是最小尺寸.我把它换成红色,但我看不到它.如何div#home-top拍摄高度divs儿童. 看代码.

我正在努力使列表始终只在1行显示元素.

为了更好地理解这一点,让我先展示一些代码:

html结构是这样的:

<div id="tab-content">
 <div id="part-list">
    <ul>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
    </ul>
  </div>
</div>

CSS风格是这样的:

#tab-content{
                    overflow: auto;
                    height: 100%;
                    position:relative;
                    background-color: #373837;
                    color: white;
                    padding-left:20px;
                    padding-right:20px;
          }

#tab-content ul{
                    display: block;
                    list-style: none outside none;
                   overflow: auto;
                   white-space: nowrap;

          }
          #tab-content ul li{
                    display: block;
                    float: left;
                    padding: 7px;
                    margin-right: 4px;
                    font-style: italic;
                    color: #cccccc;
          }

我需要ul将其项目放在1行,无论它是否大于包含div.如果它确实变大,则应该出现滚动条.现在它只是被包裹..

我在#part-list上使用jscrollPane,因为我有一个自定义滚动条.

PS:指定比包含div更大的宽度,比如说150%,不是解决方案,因为列表的内容是从数据库中提取出来的,其长度是动态的.

这是我想做的事情:

• 创建一个列表,只占用所需的空间(水平)(即最长的列表元素).

• 当列表不适合页面时,修剪列表文本并显示省略号.

我使用的组合white-space:nowrap和text-overflow:ellipsis.它适用于普通列表,但在这种情况下,列表占用页面的整个宽度.

为了强制它只需要占用尽可能多的空间我应用了一个float:left,但这打破了文本溢出.

例:

<ol style="border:1px solid red;font-size:100px;">
    <li style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Long list item. Ellipsis works.</li>
</ol>

<ol style="float:left;border:1px solid red;font-size:100px;">
    <li style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Float left list. No ellipsis here.</li>
</ol>

实例:http://jsfiddle.net/73M7G/1/

我正在尝试建立一个网站,其中有一个div的"旋转木马",它们都是并排(左侧浮动),每个都有一个全屏宽度.使用javascript我打算通过移动"轮播"将不同的div移动到视图中.

我的问题是,由于某种原因,当我设置溢出时:隐藏在包含轮播的div上,所有内容都被隐藏.当我用萤火虫检查时,div显示在正确的位置,但没有任何内容可见.

这是HTML:

<div id="content_window">
    <div id="carousel">
        <div id="p_home" class="pane">
            Home!
        </div>
        <div id="p_about" class="pane">
            About!
        </div>
        <div id="p_services" class="pane">
            Services!
        </div>
        <div id="p_contact" class="pane">
            Contact!
        </div>
    </div>
</div>

而CSS:

#content_window
{
    position:relative;
width:100%;
overflow:hidden;
}

#carousel
{
    position:absolute;
    width:400%;
    top:50px;
    left:0;
    overflow:hidden;
}

.pane
{
    float:left;
    width:25%;
    color:White;
    text-align:left;
    margin-top:50px;
}

如果我将溢出:隐藏在#content_window之外,则窗格中的内容变为可见但添加了水平滚动条,您可以滚动并查看所有窗格.有谁知道我做错了什么？

我有一个菜单float:right,应该显示在我的网站内容上方.目前,由于浮动属性,内容显示在菜单后面.你能解决吗？

代码:http://jsbin.com/tomaj/2/edit

实际情况:

它应该如何:

检查此JSFiddle：

<IMG src="https://www.google.com.hk/images/srpr/logo11w.png" alt="This image will illustrate floats">
<span>The contents of floats are </span>

图像浮动，并且span具有clear:both。但是，如果span具有显示值inline或inline-block，则不会创建间隙。仅当是时block，才创建间隙。

我检查了Spec，上面写着：

两者：要求框的顶部边框边缘在源文档前面的元素导致的任何右移和左移框的底部外边缘下方。

它没有提到display影响如何影响通关的产生。有人可以帮忙解释一下吗？