无法使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%;
 }