问需要使用Flexbox CSS设计按钮样式的帮助
EN

Stack Overflow用户

提问于 2018-06-28 08:54:01

回答 2查看 778关注 0票数 0

我正在尝试在Flexbox代码中设置历史按钮的样式，以匹配导航栏链接的样式。我似乎不能获得悬停，活动，访问，链接CSS代码来应用于整个按钮。此外，该链接根本不会在Firefox中打开，但会在Chrome和MS Edge中打开历史记录页面。

 .card .text > button {
background: #6e6b5c;
border: 0;
font-family: 'Days One', sans-serif;
font-weight: normal;
color: lightgrey;
/*text-decoration: none;*/
padding: 10px;
width: 100%;
}

.card > button a {
text-decoration: none;

}

.card > button a:link, button a:visited {
background: #6e6b5c;
color: lightgrey;
text-decoration: none;
}

.card > button a:hover, button a:active {
    background-color: #7d654b;
    color: white;   
    text-decoration: none;
}

Codepen在这里：https://codepen.io/Ovimel/pen/dKgrXa

Codepen请求帮助的帖子在这里：https://codepen.io/Ovimel/post/help-styling-css-flexbox-buttons (但我不确定人们是如何找到这些大头针和帖子的！)Codepen也是新手)。

由于我是一个不断编码的新手，这是我第一次使用Flexbox，我借用了Quackit https://www.quackit.com/html/html_editors/scratchpad/?example=/css/flexbox/examples/flexbox_cards_align-items_stretch的Flexbox卡的原始代码，根据导航代码进行了样式调整，最终添加了链接，这导致了各种问题。

css

button

flexbox

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-28 15:44:45

1、button和a是两个不同的东西。不要在button中嵌套a。您可以将它们用于完全不同的目的。a是用于link的，所以链接一些东西。您可以将其用于事件，例如窗体中的submit或javascript中的事件。所以要么使用button，要么使用a。

在你的例子中，我看到你想要链接一些东西，所以使用a (没有按钮)。

2、.card > button a:link是错误的，因为>是一个direct descendant selector，但button在.text中，而.card在其中。所以button不是.card的直系后代。

3，.card > button a:hover, button a:active {会选择button中的card的直系后代的a:hover。(见2)它将在页面上的任何地方选择button中的所有a:active，因此不仅仅是card中的那些。如果你想这样做，你应该将父选择器添加到两个选择器中。因此您的代码应该类似于.card > button a:hover, .card > button a:active

第2,3点仅供参考，以便将来对您有所帮助，但它们在这里没有用，因为您不会在button中使用a。

要像button一样设置a的样式，只需在下面的选择器中编写样式

.card .text > button,.card .text > a {，然后对于hover和active状态使用

.card .text > a:hover, .card .text > a:active {

请参阅下面的代码片段。如果您有任何其他问题，请在评论中提问。

/* style.css */

/* Make HTML5 layout elements block elements for older browsers */ 
 header, nav, aside, article, footer, section { 
  display: block; 
  } 

  @import url('https://fonts.googleapis.com/css?family=Days+One|Lora');

 body {
        font-size: 120.0%; /*14pt  19px */
        font-family: 'Lora', serif;
        line-height: 1.375;
        background-color: lightsteelblue;
        background-image: url(images/wood.jpg);
}
header{
    text-align: center;
}
 h1{
    text-align: center;
    font-family: 'Days One', sans-serif;
    line-height: 1.250;
    font-size: 2.500em; /*32pt 42px */
    font-weight: bold;
    font-style: normal;
    padding-top: 1em;
}

h2{
    font-family: 'Lora', serif;
    line-height: 1.333;
    font-size: 1.500em; /*18pt 24px */
    font-weight: 700;
    font-style: italic;
}

h3{
    font-family: 'Lora', serif;
    line-height: 1.333;
    font-size: 1.200em; /*14pt 19px */
    font-weight: 700;
    font-style: italic;
}

header h3 {
    font-style: normal;
    margin: 0;
}

p {
    font-size: 1.000em; /*12pt 16px */
    font-weight: normal;
    font-style: normal;
}

p.footnote {
    font-size: .95em; /*11 pt 15px */
}
/*style rules for paragraph text links */
p a {
    text-decoration: none;
    font-weight: bold;
    
}
p a:link, a:visited {
    color: #7d654b;
}

p a:hover, a:active {
    text-decoration: underline;
}
 /*style rule for wrapper div */
 #wrapper {
 width: 90%;
 min-width: 600px;
 max-width:1200px;
 margin: 1em auto;
 padding: 3em;
 background-color: rgb(228, 238, 248);
 }
 
 /*style rule for <a> tags in the nav section #945D60 */

  nav a {
      background-color: #6e6b5c;
      font-family: 'Days One', sans-serif;
      line-height: 1.333;
      font-size: .90em; /*11pt 15px */
      font-weight: 500;
      color: white;
      text-decoration: none;
      outline: none;
      padding: 10px 0;
      display: block;
      float: left;
      border: solid 3px #194a76; 
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      width: 25%;
      text-align: center;
      box-sizing: border-box;

      /*box sizing for older browsers */
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
  }

      /*unvisited and visited nav link styling */
  nav a:link, nav a:visited {
      background-color:#6e6b5c;
      color: lightgrey;
  }

/* hover and tap nav link styling */
  nav a:hover, nav a:active {
        background-color: #7d654b;
        color: white;
    }

article {
    clear: both;
    padding: 0 1em;
}

  .cards {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 30px 0 0;
}

  .card {
    flex: 0 0 200px;
    margin: 10px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
    text-decoration: none;
} 

  .card img {
    max-width: 100%;
    
}

  .card .text {
    padding: 0px 10px 20px;
}

  .card .text h4 {
    font-family: 'Lora', serif;
    line-height: 1.333;
    font-size: 1.0em;
    font-weight: 700;
    font-style: normal;
    margin-top: 6px;
    margin-bottom: 5px;
    text-align: center;
  }

  .card .text p {
    padding-top: 2px;
  }

  .card .text > button,.card .text > a {
    background: #6e6b5c;
    border: 0;
    font-family: 'Days One', sans-serif;
    font-weight: normal;
    color: lightgrey;
    background: #6e6b5c;
    display:block;
    font-size:14px;
    padding: 10px;
    text-align:center;
    width: 100%;
  }

 .card  a {
    text-decoration: none;
    
  }



.card  .text > a:hover, .card .text > a:active {
        background-color: #7d654b;
        color: white;   
        text-decoration: none;
}


  footer {
    background-color: #6e6b5c;
    color: white;
    text-align: right;
    padding: 10px;
    border: solid 3px #194a76; 
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  footer a {
    color: white;

  }

  .logo {
      border: solid 4px #194a76;
      float: left;
      position: relative;
      
  }

  <div id="wrapper">


  <!-- Navigation bar --> 
  <nav role="navigation"> 
  <a href="index.html">HOME</a>  
  <a href="about.html">ABOUT</a>  
  <a href="#">GALLERY</a>  
  <a href="https://jewishgen.org" target="_blank">JEWISHGEN</a>  
  </nav> 

 <!-- Header -->
<header>
 <h1>Opening the Door to Stavisht, the Shtetl</h1>
 <h3>Stavishche, Ukraine  - 49° 23' N 30° 12' E</h3>
 
 <span>Stavishche [Ukr, Rus], Stavisht [Yid], Stawiszcze [Pol], Stawyszcze, Stavische, Stavishcha, Stavysce</span>
</header>

 <!-- Page content -->
 <p style="font-style: italic; text-align: center;">The Internet has a way of bringing people together. This site is an example of how Stavisht descendants, who have met online through their own family history research, have come together to reconstruct the memories of a shtetl that existed so long ago. <br> Enjoy your visit!</p>
      
 
    <!-- Flexbox menu to inner pages -->
  
    <main class="cards" role="navigation">
        <article class="card">
          <img src="images/seige.jpg" alt="old map" width="200" height="160">
          <div class="text">
            <h4>HISTORY / MAPS</h4>
            <p>Explore the history of Stavishche from its founding as a garrison to the times of the pograms.</p>
           <a href="history.html" >HISTORY</a>
          </div>
        </article>
        
        <article class="card">
          <img src="images/lechtzer.jpg" alt="Lechtzer family" width="200" height="160">
          <div class="text">
            <h4>PEOPLE</h4>
            <p>Discover the residents of Stavishche at the turn of the century through the database of almost 2,000 residents.</p>
            <button>RESIDENTS</button>
          </div>
        </article>

        <article class="card">
          <img src="images/cemetery2.jpg" alt="cemetery" width="200" height="160">
          <div class="text">
            <h4>BURIALS</h4>
            <p>Find cemeteries throughout the world where Stavishters remain together in death.</p>
            <button>CEMETERIES</button>
          </div>
        </article>
        <article class="card">
          <img src="images/torahcrown.jpg" alt="Torah crown" width="200" height="160">
          <div class="text">
            <h4>STORIES</h4>
            <p>Imagine our ancestors lives through essays from Stavishters, their children, and grandchildren. </p>
            <button>READ</button>
          </div>
        </article>
        <article class="card">
          <img src="images/citysign.jpg" alt="Stavishche sign" width="200" height="160">
          <div class="text">
            <h4>STAVISHCHE TODAY</h4>
            <p>Visit Stavishche of today through online links, images, and videos.</p>
            <button>VISIT</button>
          </div>
        </article>
        <article class="card">
          <img src="/pix/samples/16l.jpg" alt="Sample photo" width="200" height="160">
          <div class="text">
            <h4>MORE</h4>
            <p>Give credit where credit is due.Far far away, behind the world's mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
            <button>THANK YOU</button>
          </div>
        </article>
      </main>

票数 0

Stack Overflow用户

发布于 2018-06-28 08:59:09

这是我用来设计组件样式的方法：

a[href="history.html"] {

color: white;

text-decoration: none; }

另外，有必要使用<button>标记吗？你能不能只给你的<a>标签一个类？像这样

<a href="something.html" class="btn">Something</a>

然后是css

a.btn {color: black; text-decoration: none}
a.btn:visited {color: purple}
a.btn:hover {color: grey}

更像是这样

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51073283

复制

相似问题

问需要使用Flexbox CSS设计按钮样式的帮助
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要使用Flexbox CSS设计按钮样式的帮助EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要使用Flexbox CSS设计按钮样式的帮助
EN