将其他元素移动到右侧

Question

每当我的鼠标悬停在其中一个长<li>个元素上时，其他元素就会向右移动。

这里是小提琴链接：

＆＃13;

＆＃13;

.footer_links{
    margin-top:60px;
    
}

footer .ourServices{

	display: inline-block;
	float:left;
	margin: 0px -10px 0px 77px;
    
}

footer .ourServices ul li,a,h3{
    text-decoration: none;
    color:white;
    list-style: none;
}

footer .ourServices .columns_title{
    text-transform: uppercase
}


footer .ourServices .columns_title{
    margin-bottom:17px;
    font-size:23px;
    font-family:raleway-regular;
    font-weight:lighter;
}
footer .ourServices ul li, h3{
    margin-bottom:8px;
    font-size:12px;
}

footer .ourServices ul li{
    margin-top: 10px;
}

footer ul li:hover{
    font-family: 'Open Sans';
    font-weight:bold;

}

＆＃13;

<div class="footer_links">
                                    <div class="ourServices">
                                        <h3 class="columns_title">Connect</h3>
                                        <ul>
                                            <li>1234 Street Name</li>
                                            <li>Suburb Title</li>
                                            <li>State, Australia 400</li>
                                            <li>Phone:(00) 000 000 000</li>
                                            <li>fax:(00) 000 000 000</li>
                                            <li>info@email.com</li>
                                        </ul>
                                    </div>
                            
                                    <div class="ourServices">
                                        <h3 class="columns_title">Our Services</h3>
                                        <ul>
                                            <li><a href="#">Cotmprehensive geriatric assessment</a></li>
                                            <li><a href="#">Falls, mobility problems</a></li>
                                            <li><a href="#">Incontinence</a></li>
                                            <li><a href="#">Polypharmacy</a></li>
                                            <li><a href="#">Osteoporosis</a></li>
                                            <li><a href="#">Frailty</a></li>
                                        </ul>
                                    </div>
                            
                            <div class="ourServices">
                                        <h3 class="columns_title">Explore</h3>
                                            <ul>
                                                <li><a href="#">Our Doctors</a></li>
                                                <li><a href="#">Treatments</a></li>
                                                <li><a href="#">Appointments</a></li>
                                                <li><a href="#">Services</a></li>
                                                <li><a href="#">About</a></li>
                                                <li><a href="#">Contact</a></li>
                                            </ul>
                                    </div>

＆＃13;

＆＃13;

＆＃13;

jsfiddle.net /＃＆安培; togetherjs = kdkeI5Hnq6

Answer 1

这是因为每个div的宽度由其内容的宽度决定，另一个div的位置由其旁边的div的位置决定。 bold悬停效果导致内部文本变宽，这导致其他元素定位的连锁反应。

要修复它，请设置容器的宽度，使其不会根据其内容调整大小：

footer .ourServices {
    width: 170px;
}

Answer 2

你只需为你的班级设置宽度：

 footer .ourServices
 {
   width: 150px;
 }