gpt4 book ai didi

css - 如何将
  • 置于 div 中?

转载 作者:技术小花猫 更新时间:2023-10-29 11:29:52 25 4
gpt4 key购买 nike

如何将 <li> 的无序列表居中?变成一个固定宽度的 div

<table width="100%">
<tbody>
<tr>
<td width="41%"><img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"></td>
<td width="59%"><p align="left">&nbsp;</p>
<h1 align="left">StudioTeknik.com</h1>
<p><br align="left">
<strong>Marc-André Ménard</strong></p>
<ul>
<li>Photographie digitale</li>
<li>Infographie </li>
<li>Débug et IT (MAC et PC)</li>
<li> Retouche </li>
<li>Site internet</li>
<li>Graphisme</li>
</ul>
<p align="left"><span class="style1"><strong>Cellulaire en suisse : </strong></span><a href="#">+41 079 573 48 99</a></p>
<p align="left"><strong class="style1">Skype : </strong> <a href="#">menardmam</a></p>
<p align="left"><strong class="style1">Courriel :</strong><a href="https://web.archive.org/web/20100104192317/mailto:menardmam@hotmail.com"> info@studioteknik.com</a></p></td>
</tr>
</tbody>
</table>

最佳答案

要使 ul 居中并且也让 li 元素居中,并使 ul 的宽度动态变化,请使用 display: inline-block;并将其包裹在居中的 div 中。

<style type="text/css">
.wrapper {
text-align: center;
}
.wrapper ul {
display: inline-block;
margin: 0;
padding: 0;
/* For IE, the outcast */
zoom:1;
*display: inline;
}
.wrapper li {
float: left;
padding: 2px 5px;
border: 1px solid black;
}
</style>

<div class="wrapper">
<ul>
<li>Three</li>
<li>Blind</li>
<li>Mice</li>
</ul>
</div>

更新

Here is a jsFiddle link到上面的代码。

关于css - 如何将 <ul> <li> 置于 div 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1708054/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com