格式化HTML / CSS中的标题搜索栏

问题描述 投票：-1回答：2
[05/Jan/2009:02:27:22 -0500] slapi_ldap_bind - Error: could not send bind request for id [cn=repl manager,cn=config] mech [SIMPLE]: error 91 (Can't connect to the LDAP server)
[06/Jan/2009:17:52:04 -0500] schemareload - Schema reload task starts (schema dir: default) ...
[06/Jan/2009:17:52:04 -0500] schemareload - Schema validation passed.
[06/Jan/2009:17:52:04 -0500] schemareload - Schema reload task finished.
[07/Jan/2009:15:54:08 -0500] - libdb: write: 0xb75646e5, 508: No space left on device
[07/Jan/2009:15:54:08 -0500] - libdb: txn_checkpoint: log failed at LSN [22 7649039] No space left on device
[07/Jan/2009:15:54:08 -0500] - Serious Error- - - Failed to checkpoint database, err=28 (No space left on device)
[07/Jan/2009:15:54:08 -0500] - *** DISK FULL ***
[07/Jan/2009:15:54:08 -0500] - Attempting to shut down gracefully.
[07/Jan/2009:15:54:08 -0500] - slapd shutting down - signaling operation threads
[07/Jan/2009:15:54:08 -0500] - slapd shutting down - closing down internal subsystems and plugins
[07/Jan/2009:15:54:11 -0500] - Waiting for 3 database threads to stop
[07/Jan/2009:15:54:11 -0500] - All database threads now stopped
[07/Jan/2009:15:54:12 -0500] - slapd stopped.
        Red Hat-Directory/8.1.4 B2008.310.1012
        server.example.com:389 (/etc/dirsrv/slapd-example)

[07 / Jan / 2009：22：18：41 -0500] - Red Hat-Directory / 8.1.4 B2008.310.1012启动[07 / Jan / 2009：22：18：44 -0500]内存分配器 - 无法调用calloc 0要素;尝试分配0或负数元素是不可移植的，并且在不同平台上给出不同的结果。 [07 / Jan / 2009：22：18：44 -0500] - slapd开始了。侦听所有接口端口389以获取LDAP请求

html
2个回答
1
投票

陈，你的计划有几个错误。在你的身体关闭后，还有另一个div关闭。你的清单在顶部，它应该在体内。无论如何，我接近得到你想要的东西。看看这个并运行它来得到你想要的东西。我修复了错误并将搜索放到了你想要的右侧。

<html>
<head>


<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

html{
    display: table;
    margin: auto;
}

body{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
/*   * {
    border: 1px solid red;
  } */
/*CSS for navigation bar*/
ul {
    list-style-type: none;
    margin: auto;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    text-align: center;
    margin-top:0;
}
/*Text for navigation bar*/
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;    
}
li a:hover {
    background-color: #111;
}
input[type=text] {
    width: 180px;
    box-sizing: border-box;
    border: 0px solid #ccc;
    border-radius: 2px;
    font-size: 16px;
    padding: 12px 10px 10px 10px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
    width: 150%;
}
#page-wrap{
    text-align:left;
    /* width:900px; */
    margin: 0 auto;
}

#search {
  text-align: right;
  /* position: absolute; */
    margin: 10 auto;
  float: right;
  }
  #top-bar {
    width: 900px;
  }
  
</style>
</head>
<body>
  <div id="top-bar">
    <div id="page-wrap">
      <ul>
        <li><a class="active" href="/home">Home</a></li>
        <li><a href="/users">Users</a></li>
        <li><a href="/logout">Logout</a></li>
        <div id="search">
          <li>
            <form class="example" action="/action_page.php" style="margin:auto;max-width:300px">
              <input type="text" name="search" placeholder="Search Database">
              <button type="submit"><i class="fa fa-search"></i></button>
            </form>
        </li>
        </div>
      </ul>
    </div>
   </div>
  </div>
</body>
</html>
0
投票

在flexbox中试试这个。请重新格式化您的HTML。它被打破

/*Simple CSS Reset*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  min-width: 100%;
}

body{
  display: flex;
}

header {
  padding: 10px;
  flex: 1;
  display: flex;
  background-color: #333;
  /*Use flexbox to push content from right as default direction so everything moves from right to left*/
  justify-content: flex-end;
}

/*CSS for navigation bar*/
ul {
  display: flex;
  list-style-type: none;
  text-align: center;
  /*use flexbox to take up the remaining space and push the content to the left. while leaving the space for the search box*/
  flex: 1;
}

/*Text for navigation bar*/
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;    
}

li a:hover {
  background-color: #111;
}

form {
  display: inline-block;
}

input[type=text] {
  display: inline-block;
  width: 180px;
  border: 0px solid #ccc;
  border-radius: 2px;
  font-size: 16px;
  padding: 12px 10px 10px 10px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  /*Restrict width of growth*/
  width: 270px;
}

button {
  display: inline-block;
  padding: 10px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <header>
    <ul>
      <li><a class="active" href="/home">Home</a></li>
      <li><a href="/users">Users</a></li>
      <li><a href="/logout">Logout</a></li>
    </ul>

    <form class="example" action="/action_page.php" class="search">
        <input type="text" name="search" placeholder="Search Database">
        <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </header>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.