我正在做一个元素，我们不允许接触 html，而是设计一个带有 flex box 的 CSS 页面和诸如此类的东西来改变设计。 html 代码具有指向此元素的其他 CSS 页面设计的链接，其中包含设计类型和设计者名称。我想把这两个链接放在同一个圆框中。如果运行代码，您会看到设计名称和设计师名称在同一个圆圈中 - 我该如何将它们放在同一个圆圈中？我相信有一种方法可以不改变 html，因为设计在“class="design-name"中，而设计师在"class="designer-name"中。在代码中，它看起来像这样:
body {
margin: 1%;
padding: 1%;
font-family: 'Playfair Display', serif;
font-family: 'Prata', serif;
}
header {
background-color: red;
font-family: 'Playfair Display', serif;
font-family: 'Prata', serif;
}
header h1 {
font-size: 72px;
}
.design-name {
color: black;
}
.designer-name {
color: black;
}
.designer-name li a {
background: green;
width: 120px;
height: 120px;
line-height: 115px;
border-radius: 50%;
display: block;
}
nav ul {
text-align: center;
}
nav ul li {
display: inline-flex;
}
li a {
background: red;
box-shadow: black;
width: 120px;
height: 120px;
line-height: 115px;
border-radius: 50%;
display: block;
}
li a:hover {
transition-duration: 300ms;
background: black;
}<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Prata" rel="stylesheet">
<meta charset="utf-8">
<title>CSS Zen Garden: The Beauty of CSS Design</title>
<link href="zengarden.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Dave Shea">
<meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design.">
<meta name="robots" content="all">
<!--[if lt IE 9]>
<script src="script/html5shiv.js"></script>
<![endif]-->
</head>
<body id="css-zen-garden">
<div class="page-wrapper">
<aside class="sidebar" role="complementary">
<div class="wrapper">
<div class="design-selection" id="design-selection">
<h3 class="select">Select a Design:</h3>
<nav role="navigation">
<ul>
<li>
<a href="/221/" class="design-name">Mid Century Modern</a> by <a href="http://andrewlohman.com/" class="designer-name">Andrew Lohman</a>
</li>
<li>
<a href="/220/" class="design-name">Garments</a> by <a href="http://danielmall.com/" class="designer-name">Dan Mall</a>
</li>
<li>
<a href="/219/" class="design-name">Steel</a> by <a href="http://steffen-knoeller.de" class="designer-name">Steffen Knoeller</a>
</li>
<li>
<a href="/218/" class="design-name">Apothecary</a> by <a href="http://trentwalton.com" class="designer-name">Trent Walton</a>
</li>
<li>
<a href="/217/" class="design-name">Screen Filler</a> by <a href="http://elliotjaystocks.com/" class="designer-name">Elliot Jay Stocks</a>
</li>
<li>
<a href="/216/" class="design-name">Fountain Kiss</a> by <a href="http://jeremycarlson.com" class="designer-name">Jeremy Carlson</a>
</li>
<li>
<a href="/215/" class="design-name">A Robot Named Jimmy</a> by <a href="http://meltmedia.com/" class="designer-name">meltmedia</a>
</li>
<li>
<a href="/214/" class="design-name">Verde Moderna</a> by <a href="http://www.mezzoblue.com/" class="designer-name">Dave Shea</a>
</li>
</ul>
</nav>
</div>
</body>
</html>任何指导都会很棒!
期望的结果，设计名称和设计师都是可点击的链接:
最佳答案
您可以使用 <a> 的 css到 <li> ...
同时申请display:flex到 ul和 li调整内部元素的对齐方式
堆栈片段
body {
font: 13px Verdana;
}
nav ul {
text-align: center;
display: flex;
flex-wrap: wrap;
}
nav ul li {
background: red;
width: 120px;
height: 120px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 5px;
color: #fff;
}
nav ul li a {
color: #fff;
}
nav ul li:hover {
transition-duration: 300ms;
background: black;
color: #fff;
}
nav ul li:hover a {
color: #fff;
}<body id="css-zen-garden">
<div class="page-wrapper">
<aside class="sidebar" role="complementary">
<div class="wrapper">
<div class="design-selection" id="design-selection">
<h3 class="select">Select a Design:</h3>
<nav role="navigation">
<ul>
<li>
<a href="/221/" class="design-name">Mid Century Modern</a> by <a href="http://andrewlohman.com/" class="designer-name">Andrew Lohman</a>
</li>
<li>
<a href="/220/" class="design-name">Garments</a> by <a href="http://danielmall.com/" class="designer-name">Dan Mall</a>
</li>
<li>
<a href="/219/" class="design-name">Steel</a> by <a href="http://steffen-knoeller.de" class="designer-name">Steffen Knoeller</a>
</li>
<li>
<a href="/218/" class="design-name">Apothecary</a> by <a href="http://trentwalton.com" class="designer-name">Trent Walton</a>
</li>
<li>
<a href="/217/" class="design-name">Screen Filler</a> by <a href="http://elliotjaystocks.com/" class="designer-name">Elliot Jay Stocks</a>
</li>
<li>
<a href="/216/" class="design-name">Fountain Kiss</a> by <a href="http://jeremycarlson.com" class="designer-name">Jeremy Carlson</a>
</li>
<li>
<a href="/215/" class="design-name">A Robot Named Jimmy</a> by <a href="http://meltmedia.com/" class="designer-name">meltmedia</a>
</li>
<li>
<a href="/214/" class="design-name">Verde Moderna</a> by <a href="http://www.mezzoblue.com/" class="designer-name">Dave Shea</a>
</li>
</ul>
</nav>
</div>
</div>
</aside>
</div>
</body>关于html - 将两个链接放在同一个框中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49160529/