line-height for inline elements

by zoho

HTML

<!--
inline 或者 inline-block 元素将会沿基线对齐；
而将它们设置为浮动后都将会沿顶部对齐，
但此时横向溢出时会自动换行，从而设置 overflow: hidden 无效

inline 元素设置 line-height 为包含块的高度，可以让它占用高度变高，
但背景颜色还是按照 font-size 来
-->
<div id="a">
    <span id="b"><span id="c">Inline</span></span>
    <button>Button</button>
</div>
<div class="d">
    <span class="e">Inline</span>
    <div class="f">Line<br>Line<br>Line</div>
</div>
<div class="d">
    <span class="e float">Inline</span>
    <div class="f float">Line<br>Line<br>Line</div>
</div>
<div id="head">
<button type="button" class="button dropdown-toggle" id="newbtn">
    <span>New &#9662;</span>
    <ul class="dropdown-menu">
        <li>article.tex</li>
        <li>beamer.tex</li>
        <li>jaxedit.tex</li>
    </ul>
</button>
</head>

CSS

#a, .d {
    height: 42px;
    background: #9b5b3b;
    margin-top: 30px;
}
#b {
}
#c {
    line-height: 42px;
    background: gray;
}
.e {
    line-height: 42px;
    background: gray;
    display: inline-block;
}
.float {
    float: left;
}
body {
    background: #3b5b9b;
}
.f {
    border: 0px none;
    height: 42px;
    display: inline-block;
    background: white;
}
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0px none;
    height: 42px;
    outline: none;
}
#head {
    width: 100%;
    height: 42px;
    background: gray;
    /*overflow: auto;*/
    margin-top: 20px;
}
.dropdown-toggle {
  position: relative;
}
.dropdown-toggle > .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  display: none;
  padding: 0px;
  margin: 0px;
  border: 1px solid gray;
  border-radius: 2px;
}

.dropdown-toggle:hover > .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  list-style-type: none;
  padding: 0 .5em;
  margin: 0;
}