Как выровнять этот текст и кнопки внутри Div?

Question

Я пытаюсь создать эти 4 дива в стеке.Этот макет будет фактически результатом итерации JQuery по циклу.

Я не привередлив в том, как это сделать, но я пытаюсь получить кнопки, или ссылки, или в этом случае пролистывать для отображения справа от каждого из этих элементов, а затем текст слева,

Я думаю, что отступы сбрасывают их, но я не уверен, как заставить их всех выстроиться в линию?

Я ценю любую помощь?

*{
  box-sizing: border-box;
}

body{
  margin:0;
  padding:0;
  text-align: center;
}

.container{
  width:100%;
}

.d{
  font-weight:bold;
  padding:7px 0px 7px 7px;
  font-size: em1;
  color: #55862d;
  border: 1px solid #6f6b68;
  width:100%;
  text-align: left;
  clear: both;
}


#dContainer{
  width:100%;
  padding-top:10px;
}

.dHeader{
  text-align: left;
  padding:1px 0px 1px 10px;
  max-width: 400px;
  margin: auto;
}

#dResults{
  padding-top: 5px 5px 5px 5px;
  max-width: 400px;
  margin: auto;
}

.bButton{
  color:#fff;
  height: 100%;
  background-color: #55862d;
  padding:7px 7px 7px 7px;
  float:right;
  clear: both;
}

  <section id="dContainer">
  <div class="dHeader">Title</div>
  <div id="dResults">
    <div class="d">something A<span class="bButton">Click!</span></div>
    <div class="d">something b<span class="bButton">Click!</span></div>
    <div class="d">something c<span class="bButton">Click!</span></div>
    <div class="d">something d<span class="bButton">Click!</span></div>
  </div>
  </section>

Answer 1

Вы можете создать его, используя flex.Нет необходимости плавать.

Обновить эти стили

.bButton{
  color:#fff;
  height: 100%;
  background-color: #55862d;
  padding:7px 7px 7px 7px;
  margin-left: auto;
}
.d {
  font-weight:bold;
  padding:7px 0px 7px 7px;
  font-size: 1em;
  color: #55862d;
  border: 1px solid #6f6b68;
  width:100%;
  display: flex;     
}

*{
  box-sizing: border-box;
}

body{
  margin:0;
  padding:0;
  text-align: center;
}

.container{
  width:100%;
}

.bButton{
  color:#fff;
  height: 100%;
  background-color: #55862d;
  padding:7px 7px 7px 7px;
  margin-left: auto;
}
.d {
  font-weight:bold;
  padding:7px 0px 7px 7px;
  font-size: 1em;
  color: #55862d;
  border: 1px solid #6f6b68;
  width:100%;
  display: flex;     
}



#dContainer{
  width:100%;
  padding-top:10px;
}

.dHeader{
  text-align: left;
  padding:1px 0px 1px 10px;
  max-width: 400px;
  margin: auto;
}

#dResults{
  padding-top: 5px 5px 5px 5px;
  max-width: 400px;
  margin: auto;
}

  <section id="dContainer">
  <div class="dHeader">Title</div>
  <div id="dResults">
    <div class="d">something A<span class="bButton">Click!</span></div>
    <div class="d">something b<span class="bButton">Click!</span></div>
    <div class="d">something c<span class="bButton">Click!</span></div>
    <div class="d">something d<span class="bButton">Click!</span></div>
  </div>
  </section>

Answer 2

В вашем случае должно быть достаточно добавить к кнопкам верхнюю часть отрицательного поля.

*{
  box-sizing: border-box;
}

body{
  margin:0;
  padding:0;
  text-align: center;
}

.container{
  width:100%;
}

.d{
  font-weight:bold;
  padding:7px 0px 7px 7px;
  font-size: em1;
  color: #55862d;
  border: 1px solid #6f6b68;
  width:100%;
  text-align: left;
  clear: both;
}


#dContainer{
  width:100%;
  padding-top:10px;
}

.dHeader{
  text-align: left;
  padding:1px 0px 1px 10px;
  max-width: 400px;
  margin: auto;
}

#dResults{
  padding-top: 5px 5px 5px 5px;
  max-width: 400px;
  margin: auto;
}

.bButton{
  color:#fff;
  height: 100%;
  background-color: #55862d;
  padding:8px 7px 7px 7px;
  float:right;
  clear: both;
  margin-top: -7px;
}

<section id="dContainer">
  <div class="dHeader">Title</div>
  <div id="dResults">
    <div class="d">something A<span class="bButton">Click!</span></div>
    <div class="d">something b<span class="bButton">Click!</span></div>
    <div class="d">something c<span class="bButton">Click!</span></div>
    <div class="d">something d<span class="bButton">Click!</span></div>
  </div>
  </section>

Answer 3

*{
  box-sizing: border-box;
}

body{
  margin:0;
  padding:0;
  text-align: center;
}

.container{
  width:100%;
}

.d{
  font-weight:bold;
  padding:7px 0px 7px 7px;
  font-size: em1;
  color: #55862d;
  border: 1px solid #6f6b68;
  width:100%;
  text-align: left;
  clear: both;
  margin-bottom: 5px;
}


#dContainer{
  width:100%;
  padding-top:10px;
}

.dHeader{
  text-align: left;
  padding:1px 0px 1px 10px;
  max-width: 400px;
  margin: auto;
}

#dResults{
  padding-top: 5px 5px 5px 5px;
  max-width: 400px;
  margin: auto;
}

.bButton{
  height: 100%;
  /* padding:7px; */
  padding: 1px 7px 7px 7px;
  float:right;
  clear: both;
  
}

  <section id="dContainer">
  <div class="dHeader">Title</div>
  <div id="dResults">
    <div class="d">something A<span class="bButton">Click!</span></div>
    <div class="d">something b<span class="bButton">Click!</span></div>
    <div class="d">something c<span class="bButton">Click!</span></div>
    <div class="d">something d<span class="bButton">Click!</span></div>
  </div>
  </section>

Answer 4

Используйте display: inline-block для ваших дивов .d:

Вы также можете установить margin-right на span

*{
  box-sizing: border-box;
}

body{
  margin:0;
  padding:0;
  text-align: center;
}

.container{
  width:100%;
}

.d{
  display: inline-block;

  font-weight:bold;
  padding:7px 0px 7px 7px;
  font-size: em1;
  color: #55862d;
  border: 1px solid #6f6b68;
  width:100%;
  text-align: left;
  clear: both;
}


#dContainer{
  width:100%;
  padding-top:10px;
}

.dHeader{
  text-align: left;
  padding:1px 0px 1px 10px;
  max-width: 400px;
  margin: auto;
}

#dResults{
  padding-top: 5px 5px 5px 5px;
  max-width: 400px;
  margin: auto;
}

.bButton{
  margin-right: 6px;
  color:#fff;
  height: 100%;
  background-color: #55862d;
  padding:7px 7px 7px 7px;
  float:right;
  clear: both;
}

  <section id="dContainer">
  <div class="dHeader">Title</div>
  <div id="dResults">
    <div class="d">something A<span class="bButton">Click!</span></div>
    <div class="d">something b<span class="bButton">Click!</span></div>
    <div class="d">something c<span class="bButton">Click!</span></div>
    <div class="d">something d<span class="bButton">Click!</span></div>
  </div>
  </section>