Question

我正在尝试弄清楚如何使<ul>列表在内联框中对齐。我有4个包含内容的盒子，中间的那些是完美的，但是左侧和右侧的那些都是不均匀的。

我是HTML和CSS的初学者，所以我真的很困惑该怎么做。

这就是我对CSS的看法：

.floating-box {
   float: left;
   width: 205px;
   height: 120px;
   margin: 20px;
   border: 1px solid #3B88AD; 
   padding-left:20px;
   padding-bottom: 165px;
   padding-right: 20px;
   background-color: #f2f2f2;
   font-family: open sans;
   font-size: 15px;
   color: black;
}

h1{
   padding-left: 20px;
   padding-top: 20px;
   font-family: open sans;
   text-shadow: 3px 1px #cccccc;
}

p {
   padding-left: 20px;
   font-family: open sans;
}

#skills{
   color: black;
}

这是我的HTML格式：

<div class="floating-box"><h4>Brand Identity</h4>
<p>Visual identity such as:
    <ul>
        <li id="skills">Letterheads</li>
        <li id="skills">Business cards</li>
        <li id="skills">Brand guides, and </li>
        <li id="skills">logos</li>
        <li id="skills">Research &amp identity</li>
     </ul>
</p></div>
<div class="floating-box"><h4>Package Design</h4>
    <p>
    <ul>
        <li id="skills"> Creating visually appealing and striking design.</li>
        <li id="skills"> Follwing the clients brief on their brand essence, 
        target audience, user personas, and color scheme.</li>
    </ul>
    </p></div>

 <div class="floating-box"><h4>Web Design</h4>
    <p>
    <ul>
        <li id="skills"><b>User Interface (UI) Design &amp User Experience 
        (UX):</b> 
        Analyzing how people navigate through a site, or app.</li>
        <li id="skills"><b>Interactive Design:</b> Creating mobile apps, 
        banner ads, &amp social media assets.</li>
    </ul>
    </p></div>

<div class="floating-box"><h4>Communcation Design</h4>
    <p>Designing marketing material such as:
    <ul>
        <li id="skills">Flyers</li> 
        <li id="skills">Brochures</li>
        <li id="skills">Postcards</li>
        <li id="skills">and Posters</li>
    </ul></p>
</div>

Answer 1

此代码在我的笔记本电脑中使用chrome和safari工作正常。如果在其他浏览器中工作正常，则应该尝试使用其他浏览器，而不是在Firefox中存在问题。

UL部分混乱

1 个答案: