将两个链接放在同一个框中

时间：2018-03-07 20:18:23

标签： html css css3 flexbox

我正在开发一个我们不允许触摸html的项目，而是设计一个带有弹性框的CSS页面以及改变设计的东西。 html代码包含指向此项目的其他CSS页面设计的链接，其中包含设计类型和设计器名称。我想把这两个链接放在同一个圆圈框中。如果您运行代码，您将看到设计名称和设计师名称在同一个圈子中 - 如何将它们放在同一个圈子中？我相信这是一种不改变html的方法，因为设计是在＆＃34; class =＆＃34; design-name＆＃34;并且设计师在＆＃34; class =＆＃34; designer-name＆＃34;。在代码中，它看起来像这样：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

任何指导都很棒！

期望的结果，设计名称和设计师都是可点击的链接：

1 个答案:

答案 0 :(得分：2)

您可以将<a>的css用于<li> ...

同时将display:flex应用于ul和li以调整内部项目的对齐方式

Stack Snippet 

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>

相关问题
最新问题