Question

我和我的html皮肤打架。它基于primefaces。但是有一个问题 - 选择组件不在工具栏的同一行中。

HTML CODE：

<div class="ui-toolbar ui-widget ui-widget-header ui-corner-all ui-helper-clearfix" id="fStats:stats10Toolbar">
    <div class="ui-toolbar-group-left">Company name: 
        <span class="ui-autocomplete" id="fStats:company10">
            <input type="text" value="" autocomplete="off" class="ui-autocomplete-input ui-inputfield ui-widget ui-state-default ui-corner-all"/>
        </span>
        <img width="20" height="20" src="/javax.faces.resource/spacer/dot_clear.gif.xhtml?ln=primefaces&amp;v=5.0" alt="" />
        Employee name: 
        <span class="ui-autocomplete">
            <input type="text" value="  " autocomplete="off" class="ui-autocomplete-input ui-inputfield ui-widget ui-state-default ui-corner-all"/>
            <input type="hidden" autocomplete="off"/>
        </span>
        <img width="20" height="20" src="/javax.faces.resource/spacer/dot_clear.gif.xhtml?ln=primefaces&amp;v=5.0" alt=""/>
        Phase select:
        <div class="ui-selectonemenu ui-widget ui-state-default ui-corner-all" style="width: 48px; bottom: 0px;">
            <div class="ui-helper-hidden-accessible">
                <select tabindex="-1" name="fStats:j_idt1283_input">
                    <option value=""></option>
                    <option value="A">A*</option>
                    <option value="B">B*</option>
                    <option value="C">C</option>
                </select>
            </div>
            <div class="ui-helper-hidden-accessible">
                <input type="text" readonly="readonly"/>
            </div>
            <label class="ui-selectonemenu-label ui-inputfield ui-corner-all" style="width: 32px;">C</label>
            <div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
                <span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
            </div></div>
        <img width="20" height="20" src="/javax.faces.resource/spacer/dot_clear.gif.xhtml?ln=primefaces&amp;v=5.0" alt=""/>
        <button type="submit"  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
            <span class="ui-button-text ui-c">Generuj</span>
        </button>
    </div>
</div>

CSS：

.ui-helper-clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.ui-toolbar {
    padding: 0.2em;
    position: relative;
}

.ui-toolbar-group-left {
    float: left;
}

.ui-widget-header {
    background: none repeat scroll 0 0 #424548;
    border: 1px solid #56585c;
    color: #f9f7f7;
    font-weight: bold;
}
.ui-helper-clearfix {
    display: block;
}

.ui-autocomplete {
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: auto;
}

.ui-selectonemenu {
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: auto;
}
.ui-corner-all {
    border-radius: 4px;
}

.ui-helper-hidden-accessible {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 0;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 0;
}

.ui-selectonemenu .ui-selectonemenu-label {
    border: medium none;
    display: block;
    font-weight: normal;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}

如果你会看到我的jsfiddle，你会明白： http://jsfiddle.net/bv3pz8h6/

有工具栏和选择组件，当前选择“C”。但是“C”就像是顶部对齐。我可以看到，如果我从overflow:hidden类中删除.ui-selectonemenu .ui-selectonemenu-label - 该组件是内联的，但是当文本比组件长时，它会产生其他问题。

专家，是否有其他方式将“C”内联？感谢任何提示。

Answer 1

将'.ui-selectonemenu'的vertical-align属性设置为'text-top'。

.ui-selectonemenu {
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: auto;
    vertical-align:text-top;
}

在'.ui-selectonemenu .ui-selectonemenu-label'选择器中，您可以将line-height属性设置为1em。此值表示当前字体大小。

.ui-selectonemenu .ui-selectonemenu-label {
    border: medium none;
    display: block;
    font-weight: normal;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    width: 100%;
    line-height: 1em;
}

请参阅此更新的小提琴：http://jsfiddle.net/bv3pz8h6/11/

Answer 2

将line-height: 0.7;添加到标签中，以便内联。

检查小提琴http://jsfiddle.net/bv3pz8h6/7/

Answer 3

删除display:block类样式中的.ui-selectonemenu-label位。此外，您可以为line-height添加一个值（但这仅在您需要对此项目进行更多控制时 - 在您的情况下不需要）。

您可以在http://jsfiddle.net/bv3pz8h6/3检查结果。

如何用css修复html元素标签的位置？

3 个答案: