Question

所以这是我的第一篇文章。对不起，如果冒犯了某人，我刚刚开始进入html / css。那里有很多信息教程（另外我的英语不够好）但是我不知道很多基础知识，所以大部分时间我得到的信息都会失败。

- 问题 -

我试图在阴影面板中创建3个按钮/链接：

    .panel1
    {
    	width: 640px;								 
    	height: 40px;
    	margin: 50px auto auto auto;
    	box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.5);  
    	background-color: rgba(0,10,20,0.8);		  												 
    }

    .botones
    {	
    	list-style: none;
    	float: left;
    	width: 640px;								 
    	height: auto;	
    	background-size: auto;
    	text-align: center;
    	display: inline-block;
    	font-family: impact;
    	color: yellow;
        	
    }

    #panel1
    {
    	line-height: 20px;
    	padding-left: 50px;	
    	padding-right: 10px;
    	margin-top: 5px;
    	float: left;	
    	height:auto;
    	width: auto;
        display: block;
    	color: yellow;
    }

    <div class="panel1">
    	<ul class="botones" id="panel1">
    		<li id="panel1"><a href="Index_2.html">ESTRENOS</a></li>
    		<li id="panel1"><a href="Index_3.html">LO MAS PEDIDO</a></li>
    		<li id="panel1">CONTÁCTENOS</li>
    	</ul>

“＃panel1”上的文字颜色（黄色）既不是“.botones”也不适用于仅仅是“Contactenos”的链接。

使用“paading-left”或“padding-right”排列/对齐文本也感觉不对。

我查了一个视频，其中一些人推荐这个：

<style type="text/css">
*{
     margin: 0px;
     padding: 0px;   
}

.panel1
{
    width: 960px;
    height: 40px;
    margin: 50px quto auto auto;
    box-shadow: 0px 0px 50px 2px #color;
}

.botones li
{
    list-style: none;
    float: left;
    width: 192px;
    height: 40px;
    background-color: #color;
    text-align: center;
    line-height: 40px;
    display: block;
    font-family: whatever;
}

.botones li a
{
    color: #color;
    text-decoration: none;
    etc, etc, etc
}
</style>


<div class="panel1">

    <ul class="botones">

        <li> <a href="#">ESTRENNOS </a> </li>
        <li> <a href="#">LO MAS PEDIDO </a> </li>
        <li> <a href="#">CONTACTENOS </a> </li>

</html>

问题在于我试图做同样的事情而只使用CSS，而且这个人已经将属性样式用于html。

我一直在搜索按钮上的CSS设计，但无法找到答案。

谢谢。

Answer 1

颜色（黄色）仅应用于CONTÁCTENOS，因为它是由选择器#panel1选择的。

要设置链接样式，您需要使用#panel1 a，其中a引用该链接。请查看下面的更新答案。

注意： id应该是唯一的。请避免对多个元素使用相同的ID。

.panel1 {
  width: 640px;
  height: 40px;
  margin: 50px auto auto auto;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 10, 20, 0.8);
}
.botones {
  list-style: none;
  float: left;
  width: 640px;
  height: auto;
  background-size: auto;
  text-align: center;
  display: inline-block;
  font-family: impact;
  color: yellow;
}
#panel1 {
  line-height: 20px;
  padding-left: 50px;
  padding-right: 10px;
  margin-top: 5px;
  float: left;
  height: auto;
  width: auto;
  display: block;
  color: yellow;
}
#panel1 a {
  color: yellow;
  text-decoration: none;
}

<div class="panel1">
  <ul class="botones" id="panel1">
    <li id="panel1"><a href="Index_2.html">ESTRENOS</a>
    </li>
    <li id="panel1"><a href="Index_3.html">LO MAS PEDIDO</a>
    </li>
    <li id="panel1">CONTÁCTENOS</li>
  </ul>
</div>

Answer 2

对于链接上的文本颜色，您需要在锚标记上应用样式，如下所示：

.botones a
{     
    color: yellow;
}

在您的HTML代码中，您使用相同的类名作为ID列表元素的名称，请注意ID应该是唯一的，因此请避免在多个元素上使用ID。

Answer 3

当你删除它的标签时，它会起作用。

  <div class="panel1">
    <ul class="botones" id="panel1">
        <li class="panel1">STRENOS</li>
        <li class="panel1">LO MAS PEDIDO</li>
        <li class="panel1">CONTÁCTENOS</li>
    </ul>
  </div>

一个id只能使用一次，所以使用一个类作为面板。类可以无限使用。

无法在múltiple按钮上对齐文本/链接 - 菜鸟级别

3 个答案: