Question

我想链接一个长3行的句子。这看起来很简单，但我无法找到一种优雅的方法来使线条之间的空间也可以点击。这是我的代码：

<style>
    a {
        color: #000;
        border-bottom: 1px solid #000;
        padding-bottom: 5px;
        text-decoration: none;
        font-size: 20px;
        line-height:40px;
    }
</style>

<a href="#">Lorem ipsum dolor sit amet,<br/>
consectetur adipiscing elit,<br/>
sed do eiusmod tempor</a>

小提琴：http://jsfiddle.net/zbxyjdvb/

Answer 1

你不能把div（块）放在span（inline）元素中。 Is putting a div inside an anchor ever correct?

将Anchor转换为display: inline-block，然后将用户额外的span转换为恢复文本中的下划线。

HTML：

<a href="#"><span class="underline">Lorem ipsum dolor sit amet,<br/>
consectetur adipiscing elit,<br/>
    sed do eiusmod tempor</span></a>

的CSS：

a {
    color: #000;
    text-decoration: none;
    font-size: 20px;
    line-height:40px;
    display: inline-block;
}
.underline {
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
}

演示：http://jsfiddle.net/zbxyjdvb/9/

Answer 2

围绕<a>包裹<div>。

a {
    color: #000;
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
    text-decoration: none;
    font-size: 20px;
    line-height:40px;
}

<a href="#">
   <div>Lorem ipsum dolor sit amet,<br/>
consectetur adipiscing elit,<br/>
    sed do eiusmod tempor
   </div>
</a>

Answer 3

您还可以使用伪元素来实现此目的。所以，HTML没有改变：

<a href="#">Lorem ipsum dolor sit amet,<br/>
consectetur adipiscing elit,<br/>
sed do eiusmod tempor</a>

但是，CSS是：

   a {
    color: #000;
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
    text-decoration: none;
    font-size: 20px;
    line-height:40px;
    position:relative;

}
a:before {

    content:"";
    position:absolute;
    cursor:pointer;
    left:0px;
    top:0px;
    width:100%;
    height:400%;
    /*background-color:#666;*/

}

演示：http://jsfiddle.net/zbxyjdvb/11/

根据您的a block尺寸，您必须稍微玩一下......

Answer 4

您可以在// swift-tools-version:5.2 import PackageDescription let package = Package( name: "MyVaporProject", platforms: [ .macOS(.v10_15) ], dependencies: [ // ? A server-side Swift web framework. .package(url: "https://github.com/vapor/vapor.git", from: "4.0.0"), .package(url: "https://github.com/vapor/fluent.git", from: "4.0.0"), .package(url: "https://github.com/vapor/fluent-postgres-driver.git", from: "2.0.0"), .package(url: "https://github.com/vapor/postgres-kit.git", from: "2.0.0") ], targets: [ .target( name: "App", dependencies: [ .product(name: "Fluent", package: "fluent"), .product(name: "FluentPostgresDriver", package: "fluent-postgres-driver"), .product(name: "Vapor", package: "vapor") ], swiftSettings: [ // Enable better optimizations when building in Release configuration. Despite the use of // the `.unsafeFlags` construct required by SwiftPM, this flag is recommended for Release // builds. See <https://github.com/swift-server/guides#building-for-production> for details. .unsafeFlags(["-cross-module-optimization"], .when(configuration: .release)) ] ), .target(name: "Run", dependencies: [.target(name: "App")]), .testTarget( name: "AppTests", dependencies: [ .target(name: "App"), .product(name: "XCTVapor", package: "vapor"), .product(name: "PostgresKit", package: "postgres-kit") ] ) ] )元素上添加垂直填充，以增加其可单击的区域，而不会影响布局或使周围的文本可单击。

您需要的填充量将是行高和字体大小之间的差。在您的情况下，行高为a，字体大小为40px，因此您需要20px的垂直填充来填补空白。您已经有20px作为底部填充加上一个5px边框，因此需要添加1px的顶部填充（因为您不能在不降低边框的情况下增加底部填充）

提琴：http://jsfiddle.net/sjwa7bf1/

如何使多行链接之间的空格可点击

4 个答案: