CSS 布局技巧：如何让两个盒子排成一行以及删除超链接前的圆点
<h2>CSS 布局技巧：如何让两个盒子排成一行以及删除超链接前的圆点</h2>
<h3>如何让两个盒子排成一行</h3>
<p>要让两个盒子排成一行，可以使用 <code>display: inline-block;</code> 或 <code>float: left;</code> 样式属性。</p>
<ol>
<li>使用 <code>display: inline-block;</code> 属性</li>
</ol>
<p>将两个盒子都设置为 <code>display: inline-block;</code> 属性，就可以让它们水平排列。例如：</p>
<pre><code class="language-css">.box1, .box2 {
display: inline-block;
}
</code></pre>
<p>如果存在空格或换行符等空白内容，可能会导致两个盒子之间存在缝隙，可以将两个盒子的父元素的 <code>font-size</code> 设为 0，然后再将每个盒子的 <code>font-size</code> 设回原来的值，可以解决这个问题。例如：</p>
<pre><code class="language-css">.container {
font-size: 0;
}
.box1, .box2 {
font-size: 16px;
display: inline-block;
}
</code></pre>
<ol start="2">
<li>使用 <code>float: left;</code> 属性</li>
</ol>
<p>将第一个盒子设置为 <code>float: left;</code>，第二个盒子不设置 <code>float</code>，就可以让它们水平排列。例如：</p>
<pre><code class="language-css">.box1 {
float: left;
}
</code></pre>
<p>需要注意的是，在使用 <code>float</code> 布局时，可能需要通过清除浮动（clear float）来避免布局紊乱的问题。可以在第三个盒子中添加 <code>clear: both;</code> 来清除前面的浮动。例如：</p>
<pre><code class="language-css">.box3 {
clear: both;
}
</code></pre>
<h3>删除超链接前的小圆点</h3>
<p>要删除超链接前的小圆点，可以使用 <code>list-style-type</code> 样式属性将列表样式设置为空。例如：</p>
<pre><code class="language-css">a {
list-style-type: none;
}
</code></pre>
<p>如果需要保留列表样式，可以将 <code>list-style-type</code> 设置为 <code>disc</code>，然后将 <code>text-decoration</code> 设置为 <code>none</code> 来删除超链接的下划线。例如：</p>
<pre><code class="language-css">a {
list-style-type: disc;
text-decoration: none;
}
</code></pre>
<h3>代码实例</h3>
<p>以下代码实例演示了如何删除超链接前的小圆点和下划线：</p>
<pre><code class="language-html"><ul>
<li><a href='#'>Link 1</a></li>
<li><a href='#'>Link 2</a></li>
<li><a href='#'>Link 3</a></li>
</ul>
</code></pre>
<pre><code class="language-css">ul {
list-style-type: none;
}
a {
text-decoration: none;
}
</code></pre>
<p>在上述代码中，列表样式被设置为 <code>none</code>，超链接的下划线被删除。</p>
<!DOCTYPE html>
<html>
<head>
<title>导航</title>
<style>
.first{
width: 50px;
height: 25px;
background: lightgrey;
border:1px solid black;
padding:10px;
margin:10px;
text-align:center;
line-height: 25px;
font-size:10px;
font-weight:bold;
color:white;
float:left;
}
</style>
</head> <body>
<div class='first'><li><a href=' '>首页</a></li></div>
<div class='first'><li><a href='http://www.gov.cn/'>新闻</a></li></div>
</body>
</html>
<p>删掉此代码中超链接前的圆点内容：可以将 <code>list-style-type</code> 属性设置为 <code>none</code>，这样就可以删除超链接前的圆点。例如：</p>
<pre><code class="language-css">li {
list-style-type: none;
}
</code></pre>
<p>需要注意的是，这个属性会影响所有列表项的样式，如果只想影响超链接所在的列表项，可以给这个列表项添加一个特定的类名，然后在 CSS 中使用这个类名来设置样式。例如：</p>
<pre><code class="language-html"><ul>
<li><a href='#'>Link 1</a></li>
<li class='no-bullet'><a href='#'>Link 2</a></li>
<li><a href='#'>Link 3</a></li>
</ul>
</code></pre>
<pre><code class="language-css">.no-bullet {
list-style-type: none;
}
</code></pre>
<p>在上述代码中，<code>Link 2</code> 所在的列表项被添加了一个 <code>no-bullet</code> 的类名，然后在 CSS 中使用这个类名来删除超链接前的圆点。</p>
原文地址: https://www.cveoy.top/t/topic/gKXT 著作权归作者所有。请勿转载和采集!