如何让这个 Anchor 标签在下一个 div 之前填充空间？

Question

I have been trying to create a bootstrap drop down box with some additional buttons inside. I have the main functionality sorted but the aesthetics are not quite right.

The issue I am having is that the Anchor elements are not filling the space up to the buttons on the right. I have tried experimenting with different combinations of block and inline-block which I have read elsewhere should fill the space but when it does it pushes the buttons down to the next line. When I do manage to get the buttons and anchor elements on the same line the selection area for the anchor does not extend the entire way up to the buttons.

I am currently tearing my hair out trying to get it to work but am having no luck so if anyone can offer any assistance it will be greatly appreciated.

Update:

Thanks to @Matus Jurika for suggesting using calc to adjust the sizing of the anchor element.

Updated working fiddle: fiddle

Answer 1

I sugget using calc for width:

.anchorDiv {
    display: inline-block;
    width: calc(100% - 74px);
}

Working Fiddle: https://jsfiddle.net/q3fra0bm/36/

Answer 2

This should do the trick.

.comboItemContainer {
    width: 100%;
    position: relative;
}

.anchorDiv {
    display: inline-block;
    width: 100%;
    padding: 0 80px 0 0;
}

.comboButtons {
    width: 74px;
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
}

I made the container relative so that I can freely use absolute positioning on its children with a (0,0) origin relative to the container. Then I made the buttons absolute, made it top 0 and right 0. Added 100% width on the anchor and 80px padding-right.

This may look hacky but I'm not really that good in Flex and absolutely zero in Grid

This is almost certainly cross browser though

Answer 3

This here is snippet for your solution. I am just using bootstrap row class.

 .comboRow { margin-bottom: 3px; } .comboItem { display: block !important; /*width: 67%;*/ } .comboButtons { float:right; margin-top: 3px; width: 74px; display: block; } .comboItemContainer { width: 100%; display: inline-block; } .anchorDiv { display: inline-block; } .close { /*float: right;*/ /*margin-right: 10px;*/ } .close .edit { margin-right: 5px; } #presetDropdownButton { position:absolute; } .glyphicon { font-size: 15px; } #presetDropdown { width: max-content; } #newPresetEntry { width: 50%; height: 24px; margin-left: 18px; padding-left: 6px; padding-right: 6px; } .dropdown-menu > li > div > div > a { padding: 3px 20px; clear: both; font-weight: 400; line-height: 1.42857143; color: #333; white-space: nowrap; display: block; } .dropdown-menu > li > div > div > a:focus { color: #262626; text-decoration: none; background-color: #f5f5f5; } .dropdown-menu > li > div > div > a:hover { color: #262626; text-decoration: none; background-color: #f5f5f5; } .pl-0 { padding-left: 0 !important; } .pr-0 { padding-right: 0 !important;

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div class="dropdown" id="presetDropdownButton"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> Presets <span class="caret"></span> </button> <ul class="dropdown-menu" id="presetDropdown"> <li class="comboRow"> <div class="row"> <div class="col-md-9 col-xs-9 pr-0"> <a class="comboItem" href="#" value="1">Preset 1</a> </div> <div class="col-md-3 col-xs-3 pl-0"> <button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;"> <span aria-hidden="true">&times;</span> </button> <button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;"> <span aria-hidden="true">&#9998;</span> </button> <button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;"> <span style="font-size: 18px;" aria-hidden="true">&#128190;</span> </button> </div> </div> </li> <li class="comboRow"> <div class="row"> <div class="col-md-9 col-xs-9 pr-0"> <a class="comboItem" href="#" value="1">Preset 2 with longer name</a> </div> <div class="col-md-3 col-xs-3 pl-0"> <button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;"> <span aria-hidden="true">&times;</span> </button> <button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;"> <span aria-hidden="true">&#9998;</span> </button> <button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;"> <span style="font-size: 18px;" aria-hidden="true">&#128190;</span> </button> </div> </div> </li> <li class="comboRow"> <div class="row"> <div class="col-md-9 col-xs-9 pr-0"> <a class="comboItem" href="#" value="1">Preset 3 with even longer name</a> </div> <div class="col-md-3 col-xs-3 pl-0"> <button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;"> <span aria-hidden="true">&times;</span> </button> <button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;"> <span aria-hidden="true">&#9998;</span> </button> <button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;"> <span style="font-size: 18px;" aria-hidden="true">&#128190;</span> </button> </div> </div> </li> </ul> </div>