Span元素HTML中不需要的拉伸文本

Span元素HTML中不需要的拉伸文本,html,css,glyphicons,Html,Css,Glyphicons,我试图在如下所示的范围内显示一条消息 <span class="glyphicon glyphicon-exclamation-sign alert alert-danger" id="ErrorMessage" style="display: none;" aria-hidden="true"></span>` 我这里没有自定义CSS样式 <div role="main"> <span id="maincontent"/> &

我试图在如下所示的范围内显示一条消息

<span class="glyphicon glyphicon-exclamation-sign alert alert-danger" id="ErrorMessage" style="display: none;" aria-hidden="true"></span>`
我这里没有自定义CSS样式

<div role="main">

    <span id="maincontent"/>
    <div class="container">
    <div class="jumbotron">
        <div style="height: 50px; float: center;">
            <h3>List Herd Numbers in Commonage</h3>
        </div>
        <form role="form" id="HerdForm">
            <div class="form-inline">

                <label class="control-label" for="commonage_id">Enter Commonage ID:</label>
                <input id="commonage_id" type="text" class="form-control" autofocus="autofocus"
                 placeholder="Enter ID here " />
                <button id="submitButton" type="submit" class="btn btn-primary">View</button>

            </div>
        </form>
    </div>

     <span class="glyphicon glyphicon-exclamation-sign alert alert-danger"
      id="ErrorMessage" style="display: none;" aria-hidden="true"></span>

     <div id="loader" class="loader" hidden></div>

     <div id="result_table" hidden>

        <table class="table table-striped" id="herdTable"> 

            <thead> 
                <tr>
                    <th class="threeTH">Herd Number</th>
                    <th class="threeTH">Share</th>
                    <th class="threeTH">Active Farmer</th>
                </tr>
            </thead>
            <tbody>
            </tbody> 
        </table>
     </div> 
</div>

列出常见的畜群数量
输入通用ID:
看法
畜群数量
分享
活跃的农民

您可以在单独的span标记中使用glyphicon图标,如下所示:

<span class="glyphicon glyphicon-exclamation-sign"></span>
<span class="alert alert-danger" id="ErrorMessage" style="display: none;" aria-hidden="true"></span>

字形图标不希望有图标本身以外的其他内容。问题是glyphicon类附加了更多样式,这对于普通文本是不需要的。在本例中,字体系列

解决方案是将glyphicon本身放在它自己的范围内,在ErrorMessage范围内

span[aria hidden='true']{display:none}
a:active+span[aria hidden='true']{display:block}
a:active+span[aria hidden='true']::在{content:'发生错误。;}

按此处显示文本

请提供复制此问题所需的HTML和CSS。可能是与CSS相关的问题。分享您的代码以了解我现在已经更新了问题,当我删除glyphicon类时,文本似乎正确对齐,但是icon@MrLister这很有效,谢谢你。你想把这作为一个答案,我会接受吗?
<span class="glyphicon glyphicon-exclamation-sign"></span>
<span class="alert alert-danger" id="ErrorMessage" style="display: none;" aria-hidden="true"></span>