Question

我试图在导航菜单中添加一个按钮，使其在右侧。

任何代码段将不胜感激。

<!DOCTYPE html>
<html>
<head>
<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

<div style="padding-left:16px">
  <h2>Top Navigation Example</h2>
  <p>Some content..</p>
</div>

</body>
</html>

Answer 1

您应该能够只需添加作为导航中的第一项。（请参见下面的演示）

此代码示例中是否存在您不想要的东西？还是您想要看到的东西？

my_string

$('button').click(function(){
  $('body').append('<div id="msg">Where would you like to go today?</div>');
});

$('body').on('click', '#msg', function(){
  $(this).remove();
});

#msg{position:fixed;top:5vh;left:15vw;padding:1vw;background:wheat;}

如果要在右侧显示，请将其放在 About <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> </head> <body> <div class="topnav"> <button>Test</button> <a class="active" href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> <div style="padding-left:16px"> <h2>Top Navigation Example</h2> <p>Some content..</p> </div> </body> </html>标签之后。

但是，如果要在最右侧将其导航，将导航在最左侧，则可以这样：

<a>

$('button').click(function(){
  $('body').append('<div id="msg">Where would you like to go today?</div>');
});

$('body').on('click', '#msg', function(){
  $(this).remove();
});

#msg{position:fixed;top:5vh;left:15vw;padding:1vw;background:wheat;}

.flex-parent{display:flex; justify-content:space-between;}
.flex-child{}

参考：

https://stackoverflow.com/a/56604044/1447509

如何在导航菜单中添加按钮？

1 个答案: