Question

我正在处理psd到html，我有一个像这样的图像：

enter image description here

这意味着我有一个带有Image的<a href=""></a>标签。我现在的问题是如何在那里设计链接？我需要在文本后面加<br />还是什么？

   <ul id="steps-nav">
                <li>
                    <img src="img/building-details.png" alt="Building Details"/>
                    <a href="#">STEP 1: ENTER YOUR BUILDING  DETAILS</a>
                </li>
                <li>
                    <img src="img/electricity-details.png" alt="Electricity Details"/>
                    <a href="#">STEP 2: ENTER YOUR
                        ELECTRICITY DETAILS</a>
                </li>
   </ul>

这是我的CSS：

  #steps-container{
            background-color:#0a0806;
            opacity: 0.7;
            margin-top: 43px;
            border-bottom: solid 10px #abd038;
        }

        #steps-container .steps{
            width:960px;
            margin:auto;
            height:50px;
        }
        #steps-container .steps ul li{
            float:left;
        }
        #steps-container .steps ul li a{
            text-decoration: none;
            color:#ffffff;
            border:solid 1px;
        }
        #steps-container .steps ul li a:after{
            content:"\A"; white-space:pre;
        }

Answer 1

将<a>标记放在<div>标记内。应该做的伎俩。 li

中可以接受<div>个标记

如果您不能使用div，请使用：

a:after { content:"\A"; white-space:pre; }

修改

只需使用<br />代码。

Answer 2

使用display属性指定用于元素的框的类型。一个简单的例子，说明如何在不使用CSS的情况下创建新行。

示例：

a {
    display: block;
}

Answer 3

问题1：您希望图像可以通过链接进行点击。

解决方案：将a锚点包裹在图像和文本周围，而不仅仅是文本。

问题2：您希望文本位于其旁边的多行上。

解决方案：

一个。您可以沿着您尝试的大致方向前进，直接附加图像并将文本放在旁边。

湾您可以将图像设置为带填充的背景。无法通过alt属性访问图像本身，但标签确实提供了额外的信息。

http://jsfiddle.net/D4vyM/

这将使列表项位于同一行：

#steps-nav li {    
    display: inline-block;
}

使锚点填充列表项创建的框，并为图像腾出空间：

.some-step {
    padding-left: 50px;
    display:block;
    width: 100%;
    height: 100%;
}

我们将为正在关注的文本添加样式，这也将带到新的行：

.step-focus {
    font-weight: bold;
    display: block;
}

如何以<a href=""> using css</a>结束

3 个答案: