css - 不能使 div 元素占据它的全长

Question

我试图将元素放置在 div 的中心，但它不起作用

这是所需输出的图片

我不知道为什么 div 元素会离开并且输入文本不占用 div 的全长我还尝试在橙色按钮的文本和齿轮图标之间添加空格

这是我的代码:

<af:dialog contentWidth="400" type="none" id="aaa" modal="true">
    <div class="row">
        <div class="col-md-8 sm-b-b">
            <div class="sm-padding-5">
                <af:inputText inlineStyle="display: inline-block;width:100%" value="sohoooooooooooooooooo"
                              simple="true" id="it1"/>
            </div>
        </div>
        <div class="col-md-4 sm-b-b">
            <div class="sm-padding-5">
                <af:button inlineStyle="display: inline-block;width:100%" text="Search" id="b1"></af:button>
            </div>
        </div>
    </div>
    <af:forEach var="node" items="#{bindings.ViewObj11.collectionModel}">
        <div class="row">
            <div class="col-md-12 sm-b-b">
                <div class="sm-padding-5">
                    <af:link text="#{bindings.Value1.inputValue}" styleClass="btn btn-primary white" id="ot1">
                        <span aria-hidden="true" class="fa fa-gear"></span>
                    </af:link>
                </div>
            </div>
        </div>
    </af:forEach>

Answer 1

在你的样式表中试试这个样式

 .sm-b-b{
   margin: 0 auto;
   text-align: center;
   width: 100%;
 }