问题描述
我使用的是来自clarity.design示例的标题栏，我clarity.design一些修改，试图使搜索输入占据标题栏中心的100％，但我无法做到。
编码：
<clr-header class="header-6"> <div class="branding"> <a [routerLink]="['/']" routerLinkActive="router-link-active" class="nav-link"> <span class="title">Project Clarity</span> </a> </div> <form class="search" (ngSubmit)="onSearchSubmit(f)" #f="ngForm"> <label for="search_input"></label> <input id="search_input" name="search_input" type="text" placeholder=" Search for keywords or paste link..." ngModel required> </form> <div class="header-actions"> <div class="header-nav" [clr-nav-level]="1"> <a class="nav-link nav-text"> My menu </a> </div> <clr-dropdown> <button class="nav-icon" clrDropdownTrigger> <clr-icon shape="user"></clr-icon> <clr-icon shape="caret down"></clr-icon> </button> <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right"> <a clrDropdownItem>Preferences</a> <a clrDropdownItem>Log out</a> </clr-dropdown-menu> </clr-dropdown> </div> </clr-header>
这就是它的样子，我希望标题使用所有剩余的宽度。
谢谢。
1楼
acarlstein
0
2019-03-02 22:04:09
您的问题的解决方案是CSS。
我在下面提供了一个示例，向您展示了从哪里开始。
让我知道这是否对您有帮助。
/* First, make your elements float to the left or right */ .header-6 div , .header-6 form { float: left; } div.header-actions{ float: right; } /* Then give them some space */ div.branding , form.search , div.header-actions { padding-left: 20px; padding-right: 20px;; } /* The rest is using FontAwesome and CSS to add the icons and the other stuff */
<clr-header class="header-6"> <div class="branding"> <a [routerLink]="['/']" routerLinkActive="router-link-active" class="nav-link"> <span class="title">Project Clarity</span> </a> </div> <form class="search" (ngSubmit)="onSearchSubmit(f)" #f="ngForm"> <label for="search_input"></label> <input id="search_input" name="search_input" type="text" placeholder=" Search for keywords or paste link..." ngModel required> </form> <div class="header-actions"> <div class="header-nav" [clr-nav-level]="1"> <a class="nav-link nav-text"> My menu </a> </div> <clr-dropdown> <button class="nav-icon" clrDropdownTrigger> <clr-icon shape="user"></clr-icon> <clr-icon shape="caret down"></clr-icon> </button> <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right"> <a clrDropdownItem>Preferences</a> <a clrDropdownItem>Log out</a> </clr-dropdown-menu> </clr-dropdown> </div> </clr-header>
2楼
hippeelee
0
2019-03-13 14:36:31
标头使用弹性框进行布局。
这是使用下面的CSS覆盖默认搜索样式的 。
的CSS
.search {
border: 1px solid deeppink;
flex: 1 1 auto;
max-width: none;
}
.search > label {
flex: 1 1 auto;
max-width: 90%;
}
.search > label > input {
width: 100%;
}
它应该为您调整应用程序的视觉样式提供一个起点。 您可能还需要解决响应式用例。