CSS - 链接未正确排列 - CSS - Links don't line up properly 小贝子编程网

我不是一个网页设计师，更像是一个后端开发人员。然而，前端设计师给我留下了一个我面临的问题。我有一个登录和注册链接和导航链接在右边。我希望这些链接排成一行并显示在同一个导航栏中。目前，我的链接被扭曲了。它们出现在我正在处理的页面的中间。我希望登录/注册链接与导航栏的左侧对齐，我还希望右侧导航位于主导航中。这两件事都没有发生(提供了屏幕截图)。如何让用户链接与顶部导航栏的左侧对齐，并让其他链接保持在右侧？

以下是我的屏幕截图链接：https://s30.postimg.org/tlkvrcv5t/Screen_Shot_2017_01_05_at_11_11_55_AM.png

这是我的代码：

app.blade.hp:

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="{!! asset('css/stylesheet.css') !!}" />
</head>
<body>
<div class="mainheader">
<div class="subcontainer">
<div class="subcontainer-left">
<div class="subcontainter-title">Cryptoflip</div>
@if (Auth::guest())
<div class="subcontainer-button">
<a href="/login">Login</a>
</div>
<div class="subcontainer-button">
<a href="/register">Register</a>
</div>
@else
<div class="subcontainer-button">
<a href="/user/{{$user->name}}"Your Profile</a>
</div>
<div class="subcontainer-button">
<a href="/logout">Logout</a>
</div>
@endif
</div>
</div>
<div class="subcontainer-right noselect">
<div class="subcontainer-button">
<a href="support.html">Support</a>
</div>
<div class="subcontainer-button">
<a>Provably Fair</a>
</div>
<div class="subcontainer-button">
<a>Dice</a>
</div>
<div class="subcontainer-button bt-active">
<a href="main.html">Coinflip</a>
</div>
</div>
</div>
<!-- Decoration -->
<!--<div style="height: 10px; width: 200px; margin: auto; margin-top: -50px; background-color: gold"></div>-->
</div>
<div class="maincontainer">
@yield('content')
</div>
</body>
</html>

样式表.css；

@font-face {
font-family: NexaBold;
src: url(NexaBold.otf); }
@font-face {
font-family: NexaLight;
src: url(NexaLight.otf); }
@font-face {
font-family: OpenSans;
src: url(OpenSans-Regular.ttf); }
body {
margin: 0;
background-color: #ecf0f1; }
.mainheader {
height: 75px;
font-family: NexaBold;
font-size: 28px;
line-height: 75px;
text-align: center;
vertical-align: middle;
background-color: #dce0e1; }
.menu {
height: 40px; }
.subcontainer-left {
height: 75px;
float: left; }
.subcontainer {
height: 75px;
margin: auto; }
.subcontainer-right {
height: 75px;
width: auto;
float: right; }
.subcontainer-button {
height: 75px;
width: 100px;
float: right;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 75px;
font-family: OpenSans;
font-size: 14px; }
.subcontainer-button a {
text-decoration: none;
color: black; }
.subcontainer-button a:visited {
text-decoration: none;
color: black; }
.subcontainer-button a:active {
color: black; }
.subcontainer-button a:hover {
border-bottom: 3px solid gray;
cursor: pointer; }
.subcontainer-title {
height: 75px;
float: left;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 75px;
font-family: OpenSans;
font-size: 14px; }
.bt-active a {
border-bottom: 3px solid gold; }
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.maincontainer {
height: 700px; }
.textheader {
height: 180px;
text-align: center;
vertical-align: middle;
line-height: 180px;
font-family: NexaLight;
font-size: 48px; }
.ongoing-header {
width: 700px;
margin: auto;
height: 70px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background-color: #bcc0c1; }
.subheader {
height: 70px;
width: 260px;
font-family: OpenSans;
font-weight: bold;
font-size: 22px;
text-align: center;
line-height: 70px;
vertical-align: middle;
float: left; }
.subheader-menu {
height: 36px;
background-color: #ccd0d1; }
.button {
height: 36px;
width: auto;
margin: auto;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 36px;
font-family: OpenSans;
cursor: pointer;
border-radius: 4px;
transition: 0.3s; }
.button:hover {
background-color: #ecf0f1; }
.subheader-right {
float: right;
padding-top: 16px;
width: 260px;
margin: auto;
margin-right: 24px; }
.ongoing-container {
width: 700px;
margin: auto; }
.ongoing-game {
height: 40px;
line-height: 40px;
vertical-align: middle;
text-align: center;
cursor: pointer;
font-family: OpenSans;
transition: 0.3s; }
.ongoing-game:nth-child(even):hover {
background-color: #f3f9fa; }
.ongoing-game:nth-child(odd):hover {
background-color: #f3f9fa; }
.ongoing-game:nth-child(even) {
background-color: #d3d9da; }
.ongoing-game:nth-child(odd) {
background-color: #dce0e1; }
.iconholder {
height: 20px;
width: 20px;
float: left;
margin-top: 4px;
margin-right: 4px; }
#username {
float: left;
height: 40px;
width: 220px;
text-align: left;
padding-left: 24px; }
#btcamount {
float: left;
height: 40px;
width: 220px;
text-align: right;
padding-right: 24px; }
#ongoing {
height: 40px;
width: 212px;
float: left; }
.bitcoinlogo {
height: 15px; }
.helpcontainer {
height: 600px;
width: 500px;
margin: auto;
font-family: OpenSans; }
.helpform {
margin-top: 20px;
height: 400px;
font-size: 12px; }
.helpform textarea {
resize: none;
font-family: OpenSans; }
#issuetext {
height: 100px;
width: 480px; }
#emailtext {
height: 18px;
width: 220px;
font-family: OpenSans; }
.submitbutton {
height: 40px;
width: 180px;
float: none;
margin: auto;
margin-top: 20px;
border: 1px solid gray;
background-color: white;
text-align: center;
vertical-align: middle;
line-height: 40px;
font-size: 14px;
cursor: pointer;
border-radius: 3px;
transition: 0.2s background-color; }
.submitbutton:hover {
background-color: lightgrey; }

/*#sourceMappingURL=stylesheet.css.map*/

编辑：更新代码。

去掉.subcontainer-left上的宽度。然后给.subcontainer-button一个宽度。

.subcontainer-left {
height: 75px;
/* width: 200px; */
float: left;
}
.subcontainer-button {
height: 75px;
width: 100px;
...
}

您需要将"Cryptoflip"放置在div中，例如"subcontainer title"：

<div class="subcontainer">
<div class="subcontainer-left">
<div class="subcontainer-title">Cryptoflip</div>
<div class="subcontainer-button">
<a href="/login">Login</a>
</div>
<div class="subcontainer-button">
<a href="/register">Register</a>
</div>
</div>
</div>

然后添加复制".subcontainer按钮"的样式，并修改内容以匹配您想要的外观(浮动：第一位为左)：

.subcontainer-title {
height: 75px;
width: auto;
float: left;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 75px;
font-family: OpenSans;
font-size: 14px;
}

并更改左子容器的宽度：

.subcontainer-left {
height: 75px;
width: 400px;
float: left;
}

CSS - 链接未正确排列

相关内容

最新更新

热门标签：