Question

我正在制作一排按钮：

<ul>
  <li><a href="#">Add</a></li>
  <li>
    <form ... method="post">
      <input class="Btn" type="submit" value="Update">
    </form>
  </li>  
  <li>
    <form ... method="post">
    <input class="Btn" type="submit" value="Delete">
    </form>
  </li>
  <li><a href="#">Search</a></li>
  <li><a href="#">Exit</a></li>
</ul>

使用css：

li {
  list-style: none;
  float: left;
  width: 80px;
}
li a {
  display: block;
  text-decoration: none;
  background-color: #09F;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  text-align: center;
  border-right: 1px solid #fff;
  color: #111;
}
.Btn {
  float: left;
  width: 100px;
  background-color: #09F;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  text-align: center;
  border-right: 1px solid #fff;
  color: #111;
}

我有两个问题：

a）<a>和<input>按钮的形状略有不同，但它们并不完全对齐。

b）<input>按钮的字体与<a>的字体不同。

如何让它们看起来完全一致并完美对齐？

Answer 1

在这里，尝试一下：

li {
  list-style: none;  
  display:inline;
  float:left;
}
.Btn,li a {
  width: 100px;
  background-color: #09F;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  text-align: center;
  color: #111;
  text-decoration:none;
  display:inline-block!important;
  border:none;
  line-height:18px;
  font-size:16px;
  margin-right:2px;
  font-family:Arial;  
  margin-top:0;
}

工作示例：http://jsfiddle.net/7gdzkc1v/1/

Answer 2

您可以通过在两个或更多不同的类之间添加,来添加所有常用属性

li a , .Btn {
   display: block;
   text-decoration: none;
   background-color: #09F;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
   text-align: center;
   border-right: 1px solid #fff;
   color: #111;
}

.Btn {
   float: left;
   width: 100px;  
}

Answer 3

您的<input>和<a>使用不同的字体系列和不同的字体大小。请务必设置这些值，以便浏览器不会应用其默认CSS。不要忘记将输入边距设置为0并且边框设置为无。

Answer 4

请检查fiddle。这些是我添加的新款式：

li {
    list-style: none;
    display: inline-block;
    width: 80px;
}
li a {
    display: block;
    text-decoration: none;
    background-color: #09F;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    text-align: center;
    border-right: 1px solid #fff;
    color: #111;
}
.Btn {
    width: 100%;
    background-color: #09F;
    text-align: center;
    border-right: 1px solid #fff;
    color: #111;
    border: none;
    margin: 0px;
    padding: 10px 0px 9px 0px;
    cursor: pointer;
}

就字体而言，您需要使用<input>属性为<a>标记和font-family标记定义字体。目前，<a>标记的字体是Times New Roman，<input>标记的字体是Arial。

enter image description here

Answer 5

试试这段代码。

你的CSS应该是这样的。

    li,a,.Btn{
    float:left;
    width:100px;
    height:35px;
    display:inline-block;
    list-style:none;
    margin-right:5px;
    text-align:center;
    line-height:35px;
    text-decoration:none;
    color:black;
    background:white;
    margin-bottom:5px;
    font-family:'Arial';
    font-size:14px;
    cursor:pointer;
}

.Btn{
    border:none;
}

li{
    border:1px solid;
}

jsfiddle：http://jsfiddle.net/obu63u80/

如何为<li> <a> and <input/> button</a> </li>设置相同的样式

5 个答案: