Question

我正在尝试在页脚区域中获取文本位置＆amp;为每个办公室创建两列的时间。我尝试用高度设置将它浮动到左侧，但它没有创建两列。有人可以告诉我我做错了什么吗？

你可以在这里找到这个网站......

**小提琴可能会失败**

我希望办公室和工作时间都在自己的专栏中。

这是脚本的一个区域，css我遇到了问题。

<div id="footer"><div class="content">
        <ul class="left">
            <li class="Footerbullets"><a href="default.php">HOME</a></li>
            <li class="Footerbullets"><a href="practiceareas.php">PRACTICE AREAS</a></li>
            <li class="Footerbullets"><a href="attorneyprofiles.php">ATTORNEY PROFILES</a></li>
            <li class="Footerbullets"><a href="blog.php">BLOG</a></li>
            <li class="Footerbullets"><a href="locations.php">LOCATIONS &amp; HOURS</a></li>
            <li class="Footerbullets"><a href="contactus.php">CONTACT US</a></li>
        </ul>
        <ul class="center">
            <li class="Footerbullets">CURRENT NEWS</li>
            <li>&nbsp;</li>
        </ul>
        <ul class="right">
            <li class="Footerbullets">LOCATION &amp; HOURS</li>
            <li style="padding:3px 0 3px 25px;">Atlantic County Office:</strong><br>
    210 New Road, Suite 12<br>
    Linwood Greene<br>
    Linwood, New Jersey 08221<br>
    Phone: (609) 601-8677<br>
    Fax: (609) 601-8577<br><br>

    <strong>Office Hours:</strong><br>
    Monday - Friday: 08:30 AM-5:00 PM<br>
    Saturday: 10:00 AM-12:30 PM<br>
    Other hours by appointment<br />
     <br />
    <strong>Camden County Office:</strong><br>
    1939 Route 70 East, Suite 100<br>
    Cherry Hill, New Jersey 08003<br>
    Phone:(856) 874-0555<br>
    Fax: (856) 874-9683<br><br>

    <strong>Office Hours:</strong><br>
    Monday - Friday: 08:30 AM-5:00 PM<br>
          Saturday: 10:00 AM-12:30 PM<br>
         Other hours by appointment</li>
        </ul>
     </div></div>

以下是该区域的CSS的一部分

#footer .content {
border-bottom: 1px #fff dotted;
border-top: 1px #fff dotted;
width: 960px;
height: 135px;
position: relative;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
padding-bottom: 10px;
color:#FFF;
}
#footer ul{
float: left;
width: 319px;
height: 135px;
border-right: 1px #fff dotted;
color:#FFF;
 }
#footer ul:last-child {
border-right: none;
}

#footer {
background: #4D1516;
margin-top: -200px;
z-index: 1;
position:relative;
padding-top: 220px;
padding-bottom: 100px;
color:#FFF;
font-weight:bolder;
}

div#footer ul li a{
color : #115EAC;
background-color : transparent;
text-decoration : none;
color:#FFF;
}
 div#footer ul li a:hover{
text-decoration : underline;
}
.Footerbullets{
padding:3px 0 3px 25px;
background-image:url(http://www.gdisinc.com/barker/images/menubar/footer_bullet.jpg);
background-repeat:no-repeat;
}
.Footerbullets a:link {
   color:#FFF;
 }
div#footer ul li.Footerbullets a:hover {
    color:#FF0;
 }

 /* Footer column sizes. */
#footer ul.left {
width: 20%;
 }

 #footer ul.center {
width: 40%;
 }

 #footer ul.right {
float: left;
width: 37%;
  }

Answer 1

你想要这个：http://jsfiddle.net/ggJvM/1/？

CSS：

.locationHours{
    overflow:hidden;
}
.locationHours>div{
    float:left;
    width:50%;
}
#footer .content,#footer ul{
    height:auto;
    overflow:hidden;
}

HTML：

<li class="locationHours">
    <div>
        <strong>Atlantic County Office:</strong><br>
        210 New Road, Suite 12<br>
        Linwood Greene<br>
        Linwood, New Jersey 08221<br>
        Phone: (609) 601-8677<br>
        Fax: (609) 601-8577<br><br>

        <strong>Office Hours:</strong><br>
        Monday - Friday: 08:30 AM-5:00 PM<br>
        Saturday: 10:00 AM-12:30 PM<br>
        Other hours by appointment<br />
    </div>
    <div>
        <strong>Camden County Office:</strong><br>
        1939 Route 70 East, Suite 100<br>
        Cherry Hill, New Jersey 08003<br>
        Phone:(856) 874-0555<br>
        Fax: (856) 874-9683<br><br>

        <strong>Office Hours:</strong><br>
        Monday - Friday: 08:30 AM-5:00 PM<br>
        Saturday: 10:00 AM-12:30 PM<br>
                    Other hours by appointment
    </div>
</li>

Answer 2

您在一个列表项中有两个办公室。通过关闭LI并打开一个新的来分开它们。

...
Other hours by appointment
</li><li>
<strong>Camden County Office:</strong>
...

Answer 3

不使用float属性。它在特殊的罕见情况下弄乱了网站您可以使用html 表格结构，或将它们放在display:inline-blok的某些 div 中。见this jsfiddle

Answer 4

我看不到小提琴......网站可能已关闭。但是猜测一下，你还指定了宽度吗？你需要一个宽度，否则ul会占据整个区域。

获取文本以移至新列

4 个答案: