Question

我试图从头开始制作webrazzi。我想按一下按钮，而光标在附近也要按一下按钮（在图像中您可以看到红色矩形。我还想添加一个这样的地方，然后如果我在那儿也可以按一下按钮。（抱歉英语不好）

我试图制作标签块，但当我这样做时，“搜索”文本下方出现了搜索按钮

nav ul li {
  display: inline-block;
  padding-right: 2.4rem;
}

nav ul li:nth-child(2) a{
  margin-right: 1rem;
}

nav ul li a {
  color: #0A0A0A;
  font-size: .9rem;
  font-family: 'Nanum Gothic', sans-serif;
}

<nav>
  <ul>
    <li><a href="#">Subscribe</a></li>
    <li><a href="#">Search</a><i class="fas fa-search"></i></li>
    <li><a href="#">Sign In</a></li>
    <li><a href="#">Register</a></li>
  </ul>
</nav>

Answer 1

为锚元素指定宽度和高度。

.button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
}

<a class="button" onClick="javascript: alert('hello')">Say Hello</a>

以上是this答案的扩展。

Answer 2

nav ul li {
  display: inline-block;
}

nav ul li a {
  padding: 1rem;
  border: 2px solid rebeccapurple;
  margin-left: 10px;
  color: #0A0A0A;
  font-size: .9rem;
  text-decoration: none;
  font-family: 'Nanum Gothic', sans-serif;
}

ul {
  display: flex;
  justify-content: flex-end;
  margin-top: 35px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<nav>
  <ul>
    <li><a href="#">Subscribe</a></li>
    <li><a href="#">Search <i class="fas fa-search"></i></a></li>
    <li><a href="#">Sign In</a></li>
    <li><a href="#">Register</a></li>
  </ul>
</nav>

有没有一种方法可以使光标在按钮附近时按下按钮？

2 个答案: