CSS - 链接没有正确对齐

时间：2017-01-05 19:17:42

标签： html css

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

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

这是我的代码：

app.blade.php：

<!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>

stylesheet.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 * /

编辑：更新了代码。

2 个答案:

答案 0 :(得分：0)

摆脱.subcontainer-left的宽度。然后给出.subcontainer-button的宽度。

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

.subcontainer-button {
    height: 75px;
    width: 100px;
    ...
}

答案 1 :(得分：0)

你需要放置＆＃34; Cryptoflip＆＃34;在div中，例如＆＃34; subcontainer-title＆＃34;：

$scope.$apply

然后为其复制样式＆＃34; .subcontainer-button＆＃34;并修改内容以匹配您想要的内容（float：left in first）：

<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-left的宽度：

.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;
}
相关问题
最新问题