CSS - встроенные два div и первый Div должны быть слева, а второй div должен быть в центре - PullRequest
Новая
       22

CSS - встроенные два div и первый Div должны быть слева, а второй div должен быть в центре

0 голосов
/ 21 мая 2019

Нам нужно предоставить два встроенных div, и первый div должен быть слева, а второй div должен быть в центре на одной строке. 

   <div style="margin-top:200px;">
        <div align="left" style="display:inline;">
            <label>Restrict to Primary Location:</label>
            @(Html.Kendo().DropDownList()
                                                         .Name("ddl_restictToPrimaryLoc")
                                                         .DataTextField("Text")
                                                         .DataValueField("Value")
                                                         //.Events(e => e.Change("restictToPrimaryLocChange"))
                                                         .BindTo(new List<SelectListItem>() {
                  new SelectListItem() {
                      Text = "Yes",
                      Value = "1"
                  },
                  new SelectListItem() {
                      Text = "No",
                      Value = "0"
                  }})
                                .Value("1")
                                .HtmlAttributes(new { style = "width: 5%", @class = "form-control" }))
        </div>
        <div align="center" style="display:inline;">
            <button type="button" value="button" id="btn_AddSelection" class="jqButton  margin-bottom10">Add Selection</button>
        </div>

    </div>

и показывает интерфейс в состоянии, в котором выравниваются оба элемента div по левому краю.

Пожалуйста, предложите.

Ответы [ 2 ]

1 голос
/ 21 мая 2019

Вы можете использовать flexbox, но было бы трудно держать второй div по центру, учитывая, что вы не знаете, какой центр вам нужен (центр всей линии или центр оставшегося пустого пространства). 

.container{
  display:flex;
}
.center-div{
  flex-grow:1;
  text-align:center;
}
<div style="margin-top:150px;" class="container">
        <div align="left" style="display:inline;" class="left-div">
            <label>Restrict to Primary Location:</label>      
        </div>
        <div style="display:inline;" class="center-div">
            <button type="button" value="button" id="btn_AddSelection" class="jqButton  margin-bottom10">Add Selection</button>
        </div>

    </div>
0 голосов
/ 21 мая 2019

Вы можете добиться того же, используя ширину, указанную для любого экрана, на котором будет отображаться ваш интерфейс. Сказав, что при ширине полного экрана, рассматриваемой как 100%, мы можем сказать, что left div будет приблизительно 33,33%, center div будет еще 33,33%, оставляя right div с оставшимися 33,33%. , Задав размер деления как таковой, вы можете определить элементы left и center, которые вы создаете с помощью этих классов, как показано ниже. 

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:33.33%;
    height: 20px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:33.33%;
    height: 20px;
}
<div id="container">
  <div id="left">
      <div class="form-group">
          <label class="col-md-4 control-label" for="dropdown">Restrict to Primary Location:</label>
      </div>
  </div>
  <div id="center">
      <label class="col-md-4 control-label" for="btn_AddSelection"></label>
      <div class="col-md-4">
          <button id="btn_AddSelection" name="btn_AddSelection" class="btn btn-primary">Add Selection</button>
      </div>
  </div>
  
</div>
...