Question

我有一个标题，我试图在标题的左边放一些文字，在右边放一个输入。这是代码：

<header>
   <ul>
     <li id='left'>
       <h2>Example</h2>
     </li>
     <li id='right'>
       <form>
         <input></input>
       </form>
     </li>
   </ul>
 </header>

所以，我正在做的是：

header ul {
  list-style-type:none;
  width:97%;
}
header li{
  display:inline-block;
}

header li #left {
  float:left;
  width:50%;
}

header li #right{
  float:right;
  width:50%;
}

但这只是行不通。我在这里寻找其他例子，但他们都没有工作，所以我来这里是为了提供帮助。谢谢，免责声明，我还是css的新秀。

Answer 1

看看这个

<强> CSS

header ul {
  list-style-type:none;
  width:97%;
}
header li{
  display:inline-block;
}

header li#left {
  float:left;
  width:50%;
}
h2{margin:0}
header li#right{
  float:right;
  width:50%;
}

http://jsfiddle.net/vasanthanvas/5bq6p1gt/

Answer 2

header ul {
  list-style-type:none;
  width:96%;
}
header li{
  display:inline-block;
}

header li#left {
  float:left;
  width:50%;
}

header li#right{
  float:right;
  width:50%;
    margin-top:25px;
}

<header>
   <ul>
     <li id='left'>
       <h2>Example</h2>
     </li>
     <li id='right'>
       <form>
         <input></input>
       </form>
     </li>
   </ul>
 </header>

Answer 3

＆＃13;

header ul {
  display: table;
  width: 100%;
  margin: 0;
  padding: 0;
}
header li {
  display: table-cell;
}
#right {
  text-align: right;
}

＆＃13;

<header>
   <ul>
     <li id='left'>
       <h2>Example</h2>
     </li>
     <li id='right'>
       <form>
         <input type="text">
       </form>
     </li>
   </ul>
 </header>

＆＃13;

Answer 4

以下更新的CSS将适合您。我们试试吧我已经通过紫色背景并浮动输入到右边。 CSS

header ul { list-style-type:none; width:99%; }<br />
header li{ display:inline-block;}<br />
header li #right{ float:right; width:50%;}<br />
header li #left { float:left; width:50%; }<br />
header ul { list-style-type:none; width:97%; }<br />
header li{ display:inline-block;}<br />
header li#right{ float:right; width:50%; }<br />
header li#left { float:left; width:50%; }<br />
input { float:right; }<br /><br />

浮动无序列表

4 个答案: