Question

我看到了问题make a div a link，但其背后的基础是将div position设置为relative。但在我的情况下，我已经将我的div居中，它也是圆形（我不知道这是否有所不同）但我使用固定位置，这样无论你有什么尺寸的屏幕，它总是水平居中

根据这些信息，我应该如何使我的整个徽标（div）成为可点击的链接。

/* Centering of the content */
div.homepage {
	position: fixed;
  	text-align: center;
 	margin: 0 auto;
	left: 0;
	right: 0;
}

/* Logo Design */
div.circle {
	margin: 0 auto;
	border-radius: 50%;
	width: 900px;
	height: 900px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background:
	linear-gradient(135deg, #dddada 22px, #d9ecff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px),
	linear-gradient(225deg, #dddada 22px, #d9ecff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px)0 64px;
	background-color:#dddada;
	background-size: 64px 128px 
}

p.pavel, p.design {
	font-family: 'Open Sans', sans-serif;
	font-size: 12em;
	color:	#708090;
	margin: 0;
}

<link href="css/index.css" rel="stylesheet" type="text/css">
<body>
	<div class="homepage">
		<div class="circle">
			<p class="pavel">Pavel</p>
			<p class="design">Design</p>
		</div>
		<ul>
			<li class="button"><a href="index.html" data-text="Home">Home</a></li>
			<li class="button"><a href="about.html" data-text="About">About</a></li>
			<li class="button"><a href="services.html" data-text="Services">Services</a></li>
			<li class="button"><a href="contact.html" data-text="Contact">Contact</a></li>
		</ul>
	</div>

这就是网站的样子，我希望大圆圈可以点击

Answer 1

这是<div>内部链接的工作版本，使整个圈子可以点击。当然，<p>内的<a> - 标签也不完全是犹太标记，但HTML 5允许这样做。

＆＃13;

/* Centering of the content */
div.homepage {
	position: fixed;
  	text-align: center;
 	margin: 0 auto;
	left: 0;
	right: 0;
}

/* Logo Design */
div.circle,a.circle {
	margin: 0 auto;
	border-radius: 50%;
	width: 900px;
	height: 900px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background:
	linear-gradient(135deg, #dddada 22px, #d9ecff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px),
	linear-gradient(225deg, #dddada 22px, #d9ecff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px)0 64px;
	background-color:#dddada;
	background-size: 64px 128px;
      text-decoration: none;
}

p.pavel, p.design {
	font-family: 'Open Sans', sans-serif;
	font-size: 12em;
	color:	#708090;
	margin: 0;
}

＆＃13;

<link href="css/index.css" rel="stylesheet" type="text/css">
<body>
	<div class="homepage">
		<div class="circle">
           <a class="circle" href="#">
			<p class="pavel">Pavel</p>
			<p class="design">Design</p>
           </a>
		</div>
		<ul>
			<li class="button"><a href="index.html" data-text="Home">Home</a></li>
			<li class="button"><a href="about.html" data-text="About">About</a></li>
			<li class="button"><a href="services.html" data-text="Services">Services</a></li>
			<li class="button"><a href="contact.html" data-text="Contact">Contact</a></li>
		</ul>
	</div>

＆＃13;

Answer 2

你在锚标记<a href='http://link.com'></a>中包装的任何内容都将是一个链接，包括你要包装的主div中的所有内容。请注意，这包括边距。例如，

<link href="css/index.css" rel="stylesheet" type="text/css">
<body>
    <div class="homepage">

        <a href="http://go-somewhere.com">
            <div class="circle">
                <p class="pavel">Pavel</p>
                <p class="design">Design</p>
            </div>
        </a>

圆圈现在可以点击了。但由于它以margin: 0 auto;为中心，因此边距延伸到空白区域。

要解决此问题，请将您的圈子放入容器中。为容器提供所需的宽度和位置，然后为容器内的圆形链接。

以下是工作笔的链接：

http://codepen.io/anon/pen/ENapEd

和更新的HTML / CSS

<div class='container'>
  <a href="#">
        <div class="circle">
      <p class="pavel">Pavel</p>
      <p class="design">Design</p>
        </div>
  </a>
</div>

<强> CSS

.container {
  width: 900px;
  position: relative;
  margin: 0 auto;
}

请注意，position: fixed;将不让您的圈子居中。你想要position: relative。

如何在可点击链接中创建固定位置？

2 个答案: